البدء

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

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

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

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

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

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

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