حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

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

مقدمة

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

البدء

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

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

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

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

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

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

انتقِل إلى وحدة تحكّم Google Cloud.
إنشاء مشروع أو اختياره
انقر على متابعة لتفعيل واجهة برمجة التطبيقات وأي خدمات ذات صلة.
في صفحة بيانات الاعتماد ، احصل على مفتاح واجهة برمجة التطبيقات (واضبط القيود المفروضة على مفتاح واجهة برمجة التطبيقات). ملاحظة: إذا كان لديك مفتاح حالي غير مقيّد لواجهة برمجة التطبيقات أو مفتاح يتضمّن قيودًا على المتصفح، يمكنك استخدام هذا المفتاح.
لمنع سرقة الحصص وتأمين مفتاح واجهة برمجة التطبيقات، يُرجى الاطّلاع على مقالة استخدام مفاتيح واجهة برمجة التطبيقات.
فعِّل الفوترة. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة الاستخدام والفوترة.
أنت الآن جاهز لاستخدام مفتاح واجهة برمجة التطبيقات.

الخطوة 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
    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>

يؤدي ذلك إلى إنشاء خريطة تتمحور حول Ottumwa، آيوا، ولكن لا تتضمّن أي علامة بعد.

الخطوة 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.

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

يمكنك تخصيص الخريطة باستخدام أنماط مخصّصة styling.
استخدِم وحدة تحكّم "أدوات مطوّري البرامج" في متصفح الويب لاختبار الرمز البرمجي وتشغيله، وقراءة تقارير الأخطاء وحلّ المشاكل في الرمز البرمجي.
استخدِم اختصارات لوحة المفاتيح التالية لفتح وحدة التحكّم في 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
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps,marker&v=weekly&internal_usage_attribution_ids=gmp_git_jsapisamples_v1_web-components"
            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

إضافة خريطة Google تتضمّن علامات باستخدام HTML تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.