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

<script
    async
    src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
></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
      async
      src="https://maps.googleapis.com/maps/api/js?loading=async&key=YOUR_API_KEY&libraries=maps,marker"
    ></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).

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

  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
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=GOOGLE_MAPS_API_KEY&libraries=maps,marker"></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