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

مقدمة

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

البدء

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

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

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

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

يوضّح هذا القسم كيفية مصادقة تطبيقك على واجهة برمجة التطبيقات Maps JavaScript API باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك.

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

  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 تحتوي على محمّل bootstrap لواجهة برمجة التطبيقات JavaScript API في خرائط Google، كما هو موضّح في المقتطف التالي (أضِف مفتاح واجهة برمجة التطبيقات الخاص بك):

<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