البدء

اختَر النظام الأساسي: Android iOS JavaScript

اتّبع الخطوات التالية لإعداد العلامات المتقدّمة.

الحصول على مفتاح واجهة برمجة التطبيقات وتفعيل Maps JavaScript API

قبل استخدام العلامات المتقدّمة، ستحتاج إلى مشروع على السحابة الإلكترونية يتضمّن حساب فوترة وأن تكون واجهة Maps JavaScript API مفعَّلة. لمزيد من المعلومات، يُرجى الاطّلاع على مقالة إعداد مشروعك على Google Cloud.

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

إنشاء معرّف خريطة

لإنشاء معرّف خريطة جديد، اتّبِع الخطوات الواردة في تخصيص السحابة الإلكترونية. اضبط نوع الخريطة على JavaScript، وحدد الخيار متجه أو نقطية.

إنشاء معرّف خريطة متّجه

تعديل رمز إعداد الخريطة

يتطلب هذا معرّف الخريطة الذي أنشأته للتو. ويمكنك العثور عليها في صفحة إدارة الخرائط.

  1. تحميل Maps JavaScript API.

  2. لتحميل مكتبة العلامات المتقدّمة من داخل دالة async عند الحاجة:

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    
  3. عليك تقديم معرّف خريطة عند إنشاء مثيل للخريطة باستخدام السمة mapId. قد يكون هذا المعرّف عبارة عن معرّف خريطة تقدّمه أو DEMO_MAP_ID.

    const map = new
    google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8,
      mapId: 'YOUR_MAP_ID'
    });

التحقّق من إمكانيات الخريطة (اختياري)

تتطلب محدّدات المواقع المتقدمة معرّف خريطة. إذا كان معرّف الخريطة مفقودًا أو تم تمرير معرّف خريطة غير صالح، لا يمكن تحميل العلامات المتقدمة. كخطوة لتحديد المشاكل وحلّها، يمكنك إضافة مستمع "mapcapabilities_changed" للاشتراك في التغييرات التي تطرأ على إمكانات الخريطة. سيوضح ذلك ما إذا تم استيفاء الشروط التالية:

  • معرّف خريطة صالح قيد الاستخدام.
  • يرتبط معرف الخريطة بخريطة متجهات، إذا كانت الميزات التي تتطلب خريطة متجهات قيد الاستخدام.

إنّ استخدام "إمكانيات الخرائط" هو إجراء اختياري ويُنصح به فقط لأغراض الاختبار وتحديد المشاكل وحلّها أو لأغراض التشغيل الاحتياطي في وقت التشغيل.

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

الخطوات التالية

إنشاء محدّد متقدم تلقائي