اذهب إلى المحتوى

كيفية الـتعامل مع خرائط Google Maps برمجيا باستخدام جافاسكربت (الـجزء الأول)


Lujain Maaz

لا يكاد يخلو أي موقع ويب من وجود خرائط Google فمن خلال وضع خريطة على الموقع الخاص بك فإنك تعطي تأثيرًا غنيًا ومستوى أعلى للتفاعل بين المستخدمين.

google-maps.thumb.png.2a3d62db65a54acaac

سأقوم في هذا المقال بشرح كيفيّة استخدام خرائط غوغل وإضافتها إلى صفحة الويب بالإضافة إلى كيفيّة تحديد أكثر من موقع بنفس الوقت على نفس الخريطة، وشرح بعض المزايا الـتي يمكنك إضافتها إلى خريطتك.

يمكنك تحميل الملف المصدري للمثال الموضح في هذا الدرس.

إستخدام مكتبة Google API

مكتبة Google Maps API هي عبارة عن مكتبة جافاسكربت ولنتمكن من إستخدام مكتبة Google API قم بإضافة الـسكربت الـخاص بذلك.

<script src ="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

إنشاء الخريطة

قم الآن بإنشاء div بالأبعاد الـتي تريد أن تظهر بها الـخريطة وقم بإعطاءه "id="map.

<div id="map" style="width: 600px; height: 400px;" ></div>

الآن لنقم بإنشاء السكربت لإظهار الخريطة، يجب عليك عند وضع أي خريطة أن تقوم بتحديد الإحداثيات: خط الطول longitude وخط العرض latitude ضمن الخاصية center.

يمكنك معرفة الإحداثيات لمنطقة ما بالدخول لموقع LatLong وكتابة اسم المدينة أو المنطقة.

في هذا المثال ستعرض الخريطة موقع تركيا Turkey.

لنقم الآن ضمن الدالة {} ()function initialize، بتحديد خصائص الـخريطة ضمن الـمتغير mapProp، مثل: الموقع الذي سيظهر عند تحميلها، نوعها، وحجم الـتكبير الذي نريده zoom.

كما هو موضح في الـكود الـتالـي:

<script type="text/javascript"> 
function initialize() { 
    var mapProp = { 
        center: new google.maps.LatLng(38.963745, 35.243322), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    };
}
</script>
  • نستخدم الخاصية zoom لتحديد البعد الذي نريده للمكان (قريب – بعيد).
  • الخاصية mapTypeId تحدد نوع الخريطة الذي سيظهر:
    • ROADMAP ( الخريطة العادية 2D map)
    • SATELLITE (خريطة مصورة)
    • HYBRID (خريطة مصورة بالإضافة الى أسماء الطرق والمدن)
    • TERRAIN (خريطة تتضمن الجبال والأنهار…الـخ)

لنقم الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div:

var map = new google.maps.Map(document.getElementById("map"), mapProp);

ثم إضافة الحدث DOM listener الذي يقوم بتنفيذ الدالة ()initialize عند تحميل صفحة الويب:

google.maps.event.addDomListener(window, 'load', initialize);

ليصبح الكود على هذا الشكل:

<script type="text/javascript"> 
function initialize() { 
    var mapProp = { 
        center: new google.maps.LatLng(38.963745, 35.243322), 
        zoom: 5, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), mapProp);
} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script>

ستظهر لك الخريطة بهذا الشكل:

560cd6ee7602e___1.thumb.png.fc5c30dcca43

وضع محددات Markers

إضافة محدد واحد

لنقم الآن بتحديد موقع معين ووضع محدد (marker).

أولًا قم بتعريف مصفوفة تحتوي على الإحداثيات (خط الـطول وخط الـعرض) للمدينة أو البلد أو الموقع المعين الذي تريد تحديده. مثلًا مدينة اسطنبول Istanbul:

var myLatLng = {lat: 41.008238, lng: 28.978359 };

هنا سأقوم بإضافة محدد واحد ثم سأشرح كيف يمكننا إضافة أكثر من محدد.

الآن نعطي للخاصية center الـمتغير myLatLng:

var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: myLatLng });

ثم نقوم بتعريف الـمحدد وإعطاء للخاصية position الـمتغير myLatLng:

var marker = new google.maps.Marker({ position: myLatLng, map: map, title: 'Hello World!' });

سيظهر بهذا الشكل:

560cd6ffbc538___2.thumb.png.04eed5a3671a

إضافة أكثر من محدد على نفس الـخريطة

قم بتعريف مصفوفة تحتوي على إحداثيات المواقع الـتي تود تحديدها، سأقوم بتحديد 6 مدن: Istanbul, Antalya, Ankara, Trabzon, Bursa, Adana كما هو موضح أدناه:

var myLocations = [ 
    ['Istanbul', 41.008238, 28.978359, 1], 
    ['Antalya', 36.896891, 30.713323, 2], 
    ['Ankara', 39.933363, 32.859742, 3], 
    ['Trabzon', 41.002697, 39.716763, 4], 
    ['Bursa', 40.188528, 29.060964, 5], 
    ['Adana', 36.991419, 35.330829, 6] 
];

الآن عند تعريف المحدد قم بعمل for loop حلقة تكرار وتعريف متغير i ومن ثم إعطاء الـمصفوفة myLocations للخاصية position:

var marker, i; 
for (i = 0; i < myLocations.length; i++) { 
    marker = new google.maps.Marker({ 
        position: new google.maps.LatLng(myLocations[i][1], myLocations[i][2]), 
        map: map 
    });
}

وهذه هي المواقع التي قمنا بتحديدها:

560cd70cab70f___3.thumb.png.85d69cea1961

وضع محدد مع لصيقة (label) عند الـنقر على مكان معين

سأقوم هنا بشرح فكرة عن الـevents في Google map ثم سأتطرق فيما بعد لشرح الـevents بالتفصيل في مقال مقبل إن شاء الله.

الآن لنرى كيف يمكننا عند الضغط على مكان معين على الخريطة إظهار محدد مع لصيقة. مثال: marker A, marker B.

أولاً يجب تعريف متغير Labels نضع فيه القيم الـتي نريد إظهارها في اللصيقة. مثال: الأحرف من A-Z.

ونحتاج أيضًا إلى تعريف متغير labelIndex لتحديد الـقيمة الـتي نريد إظهارها.

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; 
var labelIndex = 0;

الآن قم بتحديد المكان الـذي ستفتح عنده الخريطة. مثال: تركيا.

var Turkey = { lat: 38.963745 , lng: 35.243322 }; 
var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: Turkey });

الدالة ()addMarker

يقوم الحدث event.addListener باستدعاء التابع ()addMarker عند الضغط على الخريطة. كما في المثال التالي:

google.maps.event.addListener(map, ‘click’, function(event) {
    addMarker(event.latLng, map);
});

وليكون هناك marker محدد عند فتح الخريطة قم بإضافة محدد إلى Turkey:

addMarker(Turkey, map);

لنكتب الآن الدالة ()addMarker:

نحتاج لتعريف 2 parameters (معاملين) هما الـخريطة والـموقع map & location ثم نقوم بتعريف marker وإعطاء المعامل location للخاصية position.

ولإظهار label نقوم بإعطاء الـمتغير labels الـذي يحتوي على الأحرف من A-Z للخاصية label مع تحديد ++index لكي ينتقل عند كل نقرة جديدة لحرف جديد وإظهاره على الـ marker كما هو موضح في الكود الـتالي:

function addMarker(location, map) {

    var marker = new google.maps.Marker({
        position: location, 
        label: labels[labelIndex++ % labels.length], 
        map: map
    });
}

ستظهر لك الخريطة بهذا الشكل:

560cd7876a05f___4.thumb.png.7658d88d73d6

وعند النقر على الخريطة:

560cd7c8285ed___5.thumb.png.4939be204e42

إضافة تأثير Marker Animation

يمكنك إضافة تأثير حركي على المحدد ليبدو وكأنه يقفز ، فقط باستخدام خاصية animation:google.maps.Animation.BOUNCE كما هو موضح في الكود الـتالـي:

var marker = new google.maps.Marker({
    position: myCenter,
    animation: google.maps.Animation.BOUNCE
});

إضافة أيقونة للمحدد

يمكنك تغيير الأيقونة الخاصة بالمحدد ووضع أيقونة من اختيارك عن طريق الخاصية icon، حيث تقوم بإعطاء مسار الصورة للخاصية icon. كما هو موضح في الكود التالي:

var marker = new google.maps.Marker({
    position: myCenter,
    icon:'pin.png'
});

ستظهر لك الخريطة بهذا الشكل:

560cd7d421b99___6.thumb.png.6eb37a3932dc

إضافة شكل متعدد الخطوط Polyline

تتيح لك ميزة polyline رسم خط يصل بين سلسلة إحداثيات على الخريطة بشكل متسلسل، على سبيل المثال يمكنك رسم مسار رحلة عبر مجموعة من المدن ويمكنك التحكم بخصائص عديدة للخط مثل اللون والشفافية والحجم.

خصائص الميزة Polyline:

  • path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.
  • strokeColor - يحدد لون الخط بالـHex كود.
  • strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.
  • strokeWeight - يحدد عرض الخط بالبكسل.
  • Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.

لنقم الآن بتحديد مجموعة إحداثيات لمدن ونصل فيما بينها عن طريق polyline، سأستخدم نفس الإحداثيات التي استخدمتها في تحديد المدن عندما وضعت أكثر من محدد، سأقوم برسم خط بين ثلاث مدن: اسطنبول، انطالـيا، طرابزون.

أولاً: تحديد إحداثيات الـمدن:

var istanbul = new google.maps.LatLng(41.008238, 28.978359);

var antalya = new google.maps.LatLng(36.896891, 30.713323);

var trabzon = new google.maps.LatLng(41.002697, 39.716763);

ثانيًا: نقوم بتعريف مصفوفة myTrip وتعبئتها بأسماء المتغيرات (المدن الـتي نريد تحديد المسار عليها ):

var myTrip = [ istanbul, antalya, trabzon];

وثم نعطي المصفوفة للخاصية path:

path: myTrip,

ثالثًا: نقوم بتعريف متغير flightPath لاختيار الـخاصية polyline:

كما هو موضح في الكود الـتالي:

var map = new google.maps.Map(document.getElementById(“map”),mapProp);
var myTrip = [ istanbul, antalya, trabzon];
var flightPath = new google.maps.Polyline({
    path:myTrip,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2
});

flightPath.setMap(map);
}

ستظهر لك الخريطة بهذا الشكل:

560cd7e39ca7d___7.thumb.png.444cc649e81c

إضافة مضلع Polygon

تتيح لك هذه الـميزة إنشاء مضلع تكون زواياه عبارة عن سلسلة الإحداثيات التي تريد الوصل بينها. لا تختلف ميزة polygon كثيراً عن polyline من حيث كتابة الـتعليمات فقط نقم باستبدالـ polyline بـpolygon.

خصائص الـميزة polygon:

  • path - تحدد مجموعة الإحداثيات التي سيمر بها الخط.
  • strokeColor - يحدد لون الخط بالـHex كود.
  • strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.
  • strokeWeight - يحدد عرض الخط بالبكسل.
  • fillColor - يحدد لون المضلع بالـHex كود.
  • fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.
  • Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.

كما هو موضح في الكود التالي:

var map = new google.maps.Map(document.getElementById(“map”),mapProp);
var myTrip = [istanbul, antalya, trabzon];
var flightPath = new google.maps.Polygon({
    path: myTrip,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2
});

flightPath.setMap(map);
}

ستظهر لك الـخريطة بهذا الـشكل:

560cd7ef9c6f6___8.thumb.png.d924939b89d7

إضافة دائرة Circle

تتيح لك هذه الميزة إحاطة منطقة معينة على الخريطة بدائرة، يمكنك التحكم بقطر الدائرة ولونها وشفافيتها.

خصائص الميزة Circle:

  • center - تحديد إحداثيات مركز الدائرة. 
  • radius - تحديد قطر الدائرة بالمتر المربع. 
  • strokeColor - يحدد لون الخط بالـHex كود.
  • strokeOpacity - يحدد شفافية الخط بين 0.0 و 1.0.
  • strokeWeight - يحدد عرض الخط بالبكسل.
  • fillColor - يحدد لون المضلع بالـHex كود.
  • fillOpacity - يحدد نسبة الشفافية للمضلع بين 0.0 و 1.0.
  • Editable - تحدد ما إذا كان الخط قابل للتعديل من قبل المستخدم أم لا.

كما هو موضح في الكود التالي:

var map = new google.maps.Map(document.getElementById(“map”), mapProp);

var flightPath = new google.maps.Circle({
    center: istanbul, 
    radius: 20000, 
    strokeColor: "#0000FF", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#0000FF", 
    fillOpacity: 0.4 
}); 

flightPath.setMap(map);

ستظهر لك الخريطة بهذا الشكل:

560cd80820082___9.thumb.png.b0b8b7cd5e53

إضافة نافذة نصية InfoWindow

تتيح لك ميزة infoWindow إظهار نافذة على موقع معين محدد باسم بحيث يمكنك كتابة اسم الموقع المحدد بداخلها. كما هو موضح في الكود التالي:

var map = new google.maps.Map(document.getElementById(“map”), mapProp);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(38.963745, 35.243322),
});

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
    content:”Hello World!”
});

infowindow.open(map, marker);
}

ستظهر لك الخريطة بهذا الشكل:

560cd83ad6ce6___10.thumb.png.7cd7831ff00

هكذا نكون قد استعرضنا أهم النقاط والميزات التي تتيح لك استخدام خرائط Google Maps بسهولة في موقعك الخاص.

هل أنت جاهز الآن لإضافة Google Maps إلى موقعك والإستفادة من مزاياها؟

الـمصدر: Google Developers.

حقوق الصورة البارزة: Designed by Freepik.


تفاعل الأعضاء

أفضل التعليقات

شكرا لجهودكم المبذولة ولكن لدي مشكلة عندما اتبعت الخطوات بالحرف ظهرت الخريطة ثم اختفت وظهر لون رمادي بوسطها علامة استفهام كم في الصورة المرفقة ولاادري السبب

ارجوو الجواب ولكم جزيل الشكر

2016-06-25_13-07-51.png

رابط هذا التعليق
شارك على الشبكات الإجتماعية

مرحبًا @Ayman Sefrini

نعم بإمكانك القيام بذلك باستخدام ما يُسمى ب Geolocation API الخاص ب Google maps API، كما يلي:

  • في البداية سنحتاج للتحقق من أن المُتصفح يسمح بتحديد الموقع الجغرافي للجهاز/المستخدم:
// نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم
if (navigator.geolocation) {  
  // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى 
  navigator.geolocation.getCurrentPosition(success);  
} else {  
  // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية
  alert("There is Some Problem on your current browser to get Geo Location!");  
} 
  • إذا كان المتصفح يسمح بأمر كهذا، سنقوم باستدعاء تابع يُسمى success و سنقوم من خلاله بتحديد إحداثيات موقع المستخدم و عرضه على الخريطة.
  • تحديد إحداثيات المستخدم، خطوط طول - دوائر عرض - المدينة
var lat = position.coords.latitude;    // موقع المستخدم بالنسبة لدوائر العرض 
var long = position.coords.longitude;  // موقع المستخدم بالنسبة لخطوط الطول   
var city = position.coords.locality;   // موقع المستخدم  - المدينة
  • تحديد المكان الذي ستفتح عنده الخريطة 
var LatLng = new google.maps.LatLng(lat, long);  // تحديد الموقع على الخريطة بناءً على البيانات السابقة
  • نقوم بضبط ال options الخاصة بالخريطة
// ضبط إعدادات الخريطة
var mapOptions = {  
  center: LatLng,  
  zoom: 12,  
  mapTypeId: google.maps.MapTypeId.ROADMAP  
};  
  • الآن بتعريف متغير map وإعطاءه id الخاصة بالـ div
// عرض الخريطة على صفحة الويب
var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);  
  • نقوم بإنشاء مُحدد marker لعرض موقع المُستخدم على الخريطة
// و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية 
var marker = new google.maps.Marker({  
  position: LatLng,  
  title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "   
  + lat + +"<br />Longitude: " + long  
});  
  • نقوم بإضافة المُحدد للخريطة:
// نقوم بإضافة المُحدد للخريطة 
  marker.setMap(map);  
  • نقوم بإنشاء نافذة نصية infoWindow و نضيفها للخريطة:
// نقوم بإنشاء نافذة نصية و نضيفها للخريطة 
  var getInfoWindow = new google.maps.InfoWindow({ 
    content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" 
  });  
  
  getInfoWindow.open(map, marker); 

لتُصبِح الشيفرة النهائية بالشكل التالي:

// نتحقق من أن المتصفح الخاص بالمستخدم يدعم هذه التقنية، أو يعطي المواقع صلاحية تحديد الموقع الجعرافي للمستخدم
if (navigator.geolocation) {  
  // success فإذا كانت مدعومة من قِبل المتصفح نقوم باستدعاء تابع يُسمى 
  navigator.geolocation.getCurrentPosition(success);  
} else {  
  // و إذا لم تكُن كذلك، نُظهر للمستخدم الرسالة التالية
  alert("There is Some Problem on your current browser to get Geo Location!");  
}  

// هنا نقوم بتحديد إحداثيات المستخدو و بلده و نقوم بإعداد الخريطة حتى تقوم بعرض موقعه
function success(position) {  
  
  var lat = position.coords.latitude;    // موقع المستخدم بالنسبة لدوائر العرض 
  var long = position.coords.longitude;  // موقع المستخدم بالنسبة لخطوط الطول   
  var city = position.coords.locality;   // موقع المستخدم  - المدينة
  
  var LatLng = new google.maps.LatLng(lat, long);  // تحديد الموقع على الخريطة بناءً على البيانات السابقة
 
  // ضبط إعدادات الخريطة
  var mapOptions = {  
    center: LatLng,  
    zoom: 12,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  
  // عرض الخريطة على صفحة الويب
  var map = new google.maps.Map(document.getElementById("MyMapLOC"), mapOptions);  
  
  // و نقوم بإعداد عنوانه ليعرض إحداثيات موقع المستخدم LatLng القيمة position نقوم بتعريف المُحدد و نُعطي الخاصية 
  var marker = new google.maps.Marker({  
    position: LatLng,  
    title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: "   
    + lat + +"<br />Longitude: " + long  
  });  

  // نقوم بإضافة المُحدد للخريطة 
  marker.setMap(map);  
  
  // نقوم بإنشاء نافذة نصية و نضيفها للخريطة 
  var getInfoWindow = new google.maps.InfoWindow({ 
    content: "<b>Your Current Location</b><br/> Latitude:" + lat + "<br /> Longitude:" + long + "" 
  });  
  
  getInfoWindow.open(map, marker);  
}  

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • أضف...