البدء

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

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

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

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

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

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

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

ملاحظة مهمة: لأغراض الاختبار، يمكنك تخطّي خطوة إنشاء معرّف خريطة وضبطه باستخدام mapId: 'DEMO_MAP_ID' في رمز تطبيقك.

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

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

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

ملاحظة: تستخدِم أمثلة الخرائط للعلامات المتقدّمة أرقام تعريف الخرائط المرتبطة بأسلوب خريطة يعرض عددًا أقل من نقاط الاهتمام. في حال إعادة استخدام مثال الرمز، ننصحك باستبدال معرّفات الخرائط هذه بـ DEMO_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.
  }
});

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

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