إضافة خريطة Google محددة بعلامات باستخدام HTML

مقدمة

يشرح لك هذا البرنامج التعليمي كيفية إضافة خريطة Google باستخدام محدِّد إلى صفحة ويب باستخدام HTML. إليك الخريطة التي ستنشئها باستخدام هذا البرنامج التعليمي. يوجد علامتين، أحدهما في ماونتن فيو، كاليفورنيا، والآخر في سياتل، واشنطن.

البدء

في ما يلي الخطوات التي سنتناولها لإنشاء خريطة في Google بعلامة باستخدام HTML:

  1. الحصول على مفتاح واجهة برمجة التطبيقات
  2. إنشاء HTML وCSS وJS
  3. إضافة خريطة
  4. إضافة علامة

تحتاج إلى متصفح ويب. اختَر متصفّحًا معروفًا، مثل Google Chrome (يُنصح به) أو Firefox أو Safari أو Edge، استنادًا إلى نظامك الأساسي من قائمة المتصفّحات المتوافقة.

الخطوة 1: الحصول على مفتاح واجهة برمجة التطبيقات

يشرح هذا القسم كيفية مصادقة تطبيقك مع واجهة برمجة تطبيقات JavaScript للخرائط باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.

اتّبِع الخطوات التالية للحصول على مفتاح واجهة برمجة التطبيقات:

  1. الانتقال إلى Google Cloud Console.

  2. إنشاء مشروع أو اختياره

  3. انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.

  4. في صفحة بيانات الاعتماد، احصل على مفتاح واجهة برمجة التطبيقات (واضبط قيود مفتاح واجهة برمجة التطبيقات). ملاحظة: إذا كان لديك مفتاح واجهة برمجة تطبيقات غير مقيّد حاليًا أو مفتاح يفرض قيودًا على المتصفّح، يمكنك استخدام هذا المفتاح.

  5. لمنع سرقة الحصة وتأمين مفتاح واجهة برمجة التطبيقات، يمكنك الاطّلاع على استخدام مفاتيح واجهة برمجة التطبيقات.

  6. تفعيل الفوترة راجِع الاستخدام والفوترة للحصول على مزيد من المعلومات.

  7. يمكنك الآن استخدام مفتاح واجهة برمجة التطبيقات.

الخطوة 2: إنشاء HTML وCSS وJS

في ما يلي رمز صفحة ويب HTML أساسية:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

من أجل تحميل خريطة، يجب إضافة علامة script تحتوي على أداة تحميل التمهيد لواجهة برمجة تطبيقات JavaScript للخرائط، كما هو موضّح في المقتطف التالي (أضِف مفتاح واجهة برمجة التطبيقات الخاص بك):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps,marker&v=beta" defer>
</script>

تنبيه بكشف تفاصيل عن الحبكة: يمكنك تجربة المثال النهائي على JSFiddle.

الخطوة 3: إضافة خريطة

لإضافة خريطة من "خرائط Google" إلى الصفحة، انسخ عنصر HTML gmp-map والصقه داخل body في صفحة HTML:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

ينتج عن هذا الخريطة التالية:

تتمركز الخريطة التي أنشأتها للتو في منطقة سان خوسيه الحضرية.

الخطوة 4: إضافة علامة

لإضافة محدِّد إلى الخريطة، استخدِم عنصر HTML gmp-advanced-marker. انسخ المقتطف التالي والصِقه على كامل gmp-map الذي أضفته في الخطوة السابقة.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

يضيف الرمز السابق علامتَين ويغيّر المَعلمتَين zoom وcenter في gmp-map لإظهار هذه العلامات بشكل أفضل. يجب إدخال رقم تعريف الخريطة لاستخدام العلامات المتقدمة (يمكن استخدام DEMO_MAP_ID).

النصائح وتحديد المشاكل وحلّها

  • يمكنك تخصيص الخريطة باستخدام نمط مخصص.
  • استخدِم وحدة تحكم أدوات مطوّري البرامج في متصفح الويب لاختبار الرمز وتشغيله وقراءة تقارير الأخطاء وحل المشاكل المتعلقة بالرموز.
  • استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في Chrome:
    Command+Option+J (على Mac)، أو Control+Shift+J (على نظام التشغيل Windows).

  • اتبع الخطوات أدناه للحصول على إحداثيات خط العرض وخط الطول لموقع ما على "خرائط Google".

    1. افتح "خرائط Google" في متصفّح.
    2. انقر بزر الماوس الأيمن على الموقع الدقيق على الخريطة الذي تحتاج إلى إحداثيات له.
    3. اختَر ماذا هنا من قائمة السياقات التي تظهر. تعرض الخريطة بطاقة في أسفل الشاشة. ابحث عن إحداثيات خط العرض وخط الطول في الصف الأخير من البطاقة.

  • يمكنك تحويل عنوان إلى إحداثيات خطوط الطول والعرض باستخدام خدمة الترميز الجغرافي. توفِّر أدلة المطوّرين معلومات تفصيلية حول بدء استخدام خدمة الترميز الجغرافي.

مثال الرمز الكامل

فيما يلي الخريطة النهائية ومثال التعليمة البرمجية الكامل الذي تم استخدامه في هذا البرنامج التعليمي.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>
index.html