البدء

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

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

قبل استخدام العلامات المتقدمة، تحتاج إلى وجود سحابة حساب فوترة، وMaps JavaScript API مفعّلة. لمزيد من المعلومات، اطّلِع على مقالة إعداد مشروعك على Google 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.
  }
});

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

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