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

اعتبارًا من 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>

مزيد من المعلومات حول تحميل Maps JavaScript API

أمثلة

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

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

// 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. مزيد من المعلومات حول كل ما يمكنك فعله باستخدام العلامات المتقدّمة: