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