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

اعتبارًا من 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'. لا بأس في استخدام "DEMO_MAP_ID" إذا لم يكن لديك معرّف خريطة بالفعل.

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

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

  • إذا كانت صفحتك على الويب تستخدم تحميل النص البرمجي الديناميكي، أضِف مكتبة العلامات وقم باستيراد 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. تعرف على مزيد من المعلومات حول كل ما يمكنك عمله باستخدام العلامات المتقدمة: