اعتبارًا من 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'
لأغراض الاختبار إذا لم يكن لديك معرّف لوحة ربط
إضافة مكتبة "العلامات المتقدّمة"
تعتمد الطريقة التي تستخدمها لتحميل المكتبات على كيفية تحميل صفحة الويب لـ Maps JavaScript API.
إذا كانت صفحة الويب تستخدم تحميل النصوص البرمجية الديناميكية، أضِف مكتبة العلامات و استورِد
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. اطّلِع على مزيد من المعلومات حول كل ما يمكنك فعله باستخدام العلامات المتقدّمة: