البدء

اتبع هذه الخطوات للإعداد باستخدام العلامات المتقدمة.

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

قبل استخدام العلامات المتقدمة، ستحتاج إلى مشروع على السحابة الإلكترونية مع حساب فوترة، إلى جانب تفعيل واجهة برمجة تطبيقات JavaScript للخرائط. لمزيد من المعلومات، اطّلِع على مقالة إعداد مشروعك على Google Cloud.

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

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

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

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

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

1. تحميل واجهة برمجة تطبيقات JavaScript للخرائط

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.
  }
});

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

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