اعتبارًا من 21 شباط (فبراير) 2024 (الإصدار 3.56)، تم إيقاف google.maps.Marker نهائيًا. ننصحك
بالانتقال إلى الفئة google.maps.marker.AdvancedMarkerElement
الجديدة. توفّر العلامات المتقدمة تحسينات مهمة على فئة
google.maps.Marker
القديمة.
مزيد من المعلومات عن هذا الإيقاف النهائي
لتحديث علامة قديمة لتصبح علامة متقدمة، اتبع الخطوات التالية:
- أضِف الرمز لاستيراد مكتبة العلامات. تجدر الإشارة إلى أنّ الإصدار السابق من
العلامات (
google.maps.Marker
) لا يشمل هذا الشرط. - تغيير
google.maps.Marker
إلىgoogle.maps.marker.AdvancedMarkerElement
- أضف رقم تعريف خريطة إلى رمز إعداد الخريطة. على سبيل المثال
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. تعرف على مزيد من المعلومات حول كل ما يمكنك عمله باستخدام العلامات المتقدمة: