البدء

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

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

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

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

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