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

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

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

بما أنّ صفحة HTML يجب أن تكون مستقلة، أضِف رمز CSS مباشرةً إلى الصفحة:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
      defer
    ></script>
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

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

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

<gmp-map center="41.027748173921374, -92.41852445367961" zoom="13" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

سيؤدي ذلك إلى إنشاء خريطة تتوسّطها مدينة أوتوموا في ولاية آيوا، ولكن لن يظهر أيّ علامة بعد.

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

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

<gmp-map
  center="41.027748173921374, -92.41852445367961"
  zoom="13"
  map-id="DEMO_MAP_ID"
>
  <gmp-advanced-marker
    position="41.027748173921374, -92.41852445367961"
    title="Ottumwa, IA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

يضيف الرمز السابق علامة إلى الخريطة. يجب توفير رقم تعريف خريطة لاستخدام محدّدات المواقع المتقدّمة (يمكن استخدام DEMO_MAP_ID).

تجربة المثال المكتمل على JSFiddle

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

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

  • اتّبِع الخطوات التالية للحصول على إحداثيات خط العرض وخط الطول لموقع جغرافي على &quot;خرائط Google&quot;.

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

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

مثال كامل على الرمز البرمجي

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

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>
    <style>
      gmp-map {
        height: 100%;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script type="module" src="./index.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly"
      defer
    ></script>
  </head>
  <body>
    <gmp-map
      center="41.027748173921374, -92.41852445367961"
      zoom="13"
      map-id="DEMO_MAP_ID"
    >
      <gmp-advanced-marker
        position="41.027748173921374, -92.41852445367961"
        title="Ottumwa, IA"
      ></gmp-advanced-marker>
    </gmp-map>
  </body>
</html>
index.html