إضافة خريطة 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&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>

    <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