نقل البيانات إلى العلامات المتقدّمة

اعتبارًا من 21 شباط (فبراير) 2024 (الإصدار 3.56)، تم إيقاف علامة google.maps.Marker نهائيًا. ننصح باستخدام الصف google.maps.marker.AdvancedMarkerElement الجديد. توفّر العلامات المتقدّمة تحسينات كبيرة مقارنةً بفئة google.maps.Marker القديمة.

مزيد من المعلومات عن إيقاف هذه الميزة نهائيًا

لتعديل علامة قديمة لتصبح علامة متقدّمة، اتّبِع الخطوات التالية:

1. أضِف رمزًا لاستيراد مكتبة العلامات. يُرجى العلم أنّ الإصدار السابق من العلامات (google.maps.Marker) لا يفرض هذا الشرط.
2. تغيير google.maps.Marker إلى google.maps.marker.AdvancedMarkerElement
3. أضِف معرّف خريطة إلى رمز إعداد الخريطة. على سبيل المثال، mapId: 'DEMO_MAP_ID' لأغراض الاختبار إذا لم يكن لديك معرّف خريطة

إضافة مكتبة "العلامات المتقدّمة"

تعتمد الطريقة التي تستخدمها لتحميل المكتبات على كيفية تحميل صفحة الويب لـ Maps JavaScript API.

• إذا كانت صفحة الويب تستخدِم تحميل النصوص البرمجية الديناميكية، أضِف مكتبة العلامات و استورِد AdvancedMarkerElement (وPinElement اختياريًا) أثناء التشغيل، كما هو موضح هنا.

  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");

• إذا كانت صفحة الويب تستخدم علامة تحميل النص البرمجي المباشر القديمة، أضِف libraries=marker إلى النص البرمجي لتحميل الصفحة، كما هو موضّح في المقتطف التالي.

  <script
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
  defer
  ></script>

مزيد من المعلومات حول تحميل واجهة برمجة التطبيقات JavaScript API في "خرائط Google"

أمثلة

تعرض أمثلة الرموز البرمجية التالية رمزًا لإضافة علامة قديمة، متبوعًا برمز المثال نفسه باستخدام العلامات المتقدّمة:

قبل نقل البيانات

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

بعد نقل البيانات

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

استكشاف ميزات العلامات المتقدّمة

يمكن تخصيص العلامات المتقدّمة بطرق لم تكن متاحة من قبل. يمكنك الآن تعديل حجم (مقياس) العلامات وتغيير ألوان الخلفية والحدود والرمز. إنّ استخدام صور الرسومات المخصّصة أسهل، وأصبح من الممكن الآن إنشاء علامات مخصّصة باستخدام HTML وCSS. اطّلِع على مزيد من المعلومات حول كل ما يمكنك فعله باستخدام العلامات المتقدّمة:

• تخصيص العلامات الأساسية
• إنشاء علامات باستخدام الرسومات
• إنشاء علامات باستخدام HTML وCSS
• التحكّم في سلوك الاصطدام والارتفاع ومستوى الرؤية
• إتاحة النقر على العلامات والوصول إليها