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

تعتبر خرائط غوغل Google Maps الأكثر استعمالا على شبكة الإنترنت نظرا لدقتها العالية وجودتها وكفائتها الفريدتين. كما أن اسم شركة غوغل العملاقة التي تقف وراءها يلعب دورا كبيرا في احتلالها هذه المكانة من خلال الدعم الكبير الموفَّر لها.
عند الإشتغال في مشروع احترافي فإن استعمال منصة خرائط غوغل Google Maps Api (منصة الجافاسكريبت) يصبح في أحيان عدة أمرا ضروريا لا مفر منه، ولهذا قررنا انجاز سلسلة من الدروس تخص هذه المنصة حتى نكون فكرة واضحة عن كيفية عملها وتنصيبها.

التنصيب واستدعاء المنصة

أولا نقوم باستدعاء سكريبت المنصة في منطقة ال <head> على النحو التالي :

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

*يمكن العمل بالمنصة من دون المفتاح النصي ولكن غوغل لاتنصح بهذا.

* احصل على المفتاح النصي من خلال هذا الرابط.

إضافة الكود الخاص بنا

بعد استدعاء السكريبت، نقوم بإنشاء عنصر <div> ونعطيه id معين (مثلا map) سنستعمله لاحقا في الجافاسكريبت الخاص بنا و نعطيه عرضا وطولا معينين حسب الحالة :

وبعد ذلك سنضيف شيفرة الجافاسكريبت التالية في صفحتنا أو في ملف خارجي :

قمنا بانشاء دالة أسمايناها initialize وفي سطرها أنشأنا المتغير mekkah ويحتوي على إحداثيات مركز الخريطة الذي اخترناه وفي هذه الحالة اخترت مدينة مكة المكرمة.

خريطة غوغل
خريطة غوغل ومدينة مكة المكرمة في الوسط

بعد ذلك نقوم بإنشاء متغير mapOptions على شكل litteral object يحتوي على خيارات لضبط الخريطة حسب حاجتنا، هنا أردنا أن يكون مقدار الزوم يساوي ثمانية والمركز كما شرحنا سالفا سيكون هو إحداثيات مكة المكرمة.
بعد ذلك ننشء متغير اسمه map ونمرر إليه بارامترين: الأول هو id العنصر <div> الذي أنشأناه سالفا والثاني هو المتغير mapOptions.

وأخير نقوم باستدعاء الدالة ()initialize عندما يتم تحميل Google Maps Api بشكل كامل على النحو التالي :

في الأخير يكون الكود الإجمالي كما يلي :

الآن وعند فتح الصفحة في المتصفح ستظهر لنا خريطة غوغل الجميلة كما يتبين هنا.
نراكم في الجزء القادم لنكتشف المزيد في هذه المنصة المتميزة.
لا تنسوا مشاركة الدرس مع أصدقائكم إذا أعجبكم 🙂

*إذا كانت لديكم أية أسئلة أواستفهامات لا تترددوا في طرحها أسفله في منطقة التعليقات.

ترك الرد

Please enter your comment!
Please enter your name here