إضافة خريطة 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. في صفحة Credentials (بيانات الاعتماد)، احصل على مفتاح واجهة برمجة التطبيقات (وضبط مفتاح واجهة برمجة التطبيقات). القيود). ملاحظة: إذا كان لديك مفتاح واجهة برمجة تطبيقات غير مقيّد أو مفتاح حالي مع قيود المتصفح، يمكنك استخدام هذا المفتاح.

  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>

    <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