تعرف على منصة Google Maps Api

استكمالا للدرس الأول من دورة منصة الجافاسكريبت لخرائط غوغل Google Maps Api، سنرى اليوم كيفية إضافة العلامات (Markers) إلى الخريطة، كما سنقوم بإضافة نافذة معلومات تُفتح على مستوى الخريطة عند النقر على ال Marker.

إضافة الماركر Marker

لإضافة العلامة (Marker) للخريطة نقوم بإنشاء كائن من الكلاس google.maps.Marker ونقوم بإعطائه بعض البارامترات التي يحتاجها كالتالي :

أنشأنا الكائن marker ومررنا له البارامتر position لتحديد موضعه واسم الخريطة map كما أعطيناه في الدرس السابق، ثم عنوانا يظهر عند عمل mouseover على ال Marker.

وهنا الكود كاملا بعد إضافة ال Marker على نقطة مدينة مكة المكرمة :

Capture d’écran 2015-03-09 à 23.48.17

والآن نريد عرض بعد المعلومات عن مدينة مكة بعد النقر على العلامة Marker؛ الأمر ممكن وسهل بفضل الكائن Infowindow.

إظهار Infowindow عند النقر على العلامة

لإضافة ميزة نافذة المعلومات، سننشئ كائنا من الكلاس google.maps.InfoWindow ثم نقوم بإظهارها عند النقر على العلامة (Marker).

*هنا استعملنا كلمة الكلاس تجاوزا فقط من أجل إيضاح الموضوع، وإلا فلاوجود لمصطلح كلاس في الجافاسكريبت فكل شيء في هذه اللغة عبارة عن object.

أولا سنقوم بإنشاء متغير(infos) يضم كود ال html أو المعلومات التي نريد إضافتها للنافذة InfoWindow :

بعد ذلك ننشئ الكائن infowindow ونضيف إليه هذا المحتوى (content) ثم باستعمال الوظيفة open نطلب من النافذة Infowindow الظهور في الخريطة عن النقر على ال Marker كما يلي :

والآن إذا عملنا click على العلامة (Marker) ستظهر لنا نافذة جميلة تحتوي معلومات عن مدينة مكة المكرمة. إليكم الكود الإجمالي وهذا رابط من أجل مشاهدة Demo درس اليوم.

Capture d’écran 2015-03-10 à 00.22.55

نتمنى أن يكون الموضوع واضحا للجميع.. لا تترددوا في إبداء ملاحظاتكم وتعليقاتكم أسفله.

إلى درس آخر قادم إن شاء الله.

السلام عليكم.

ترك الرد

Please enter your comment!
Please enter your name here