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

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

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

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