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

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

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