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

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

أمثلة

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

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

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