إشعار: ستتوفّر قريبًا ميزة جديدة لتصميم الخرائط الأساسية في "منصة خرائط Google". يتضمّن هذا التعديل على تصميم الخريطة لوحة ألوان تلقائية جديدة وعلامات جديدة وتحسينات على تجارب الخريطة وسهولة استخدامها. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. لمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل هذا النمط في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد لمنصّة "خرائط Google".
لتعديل علامة قديمة لتصبح علامة متقدّمة، اتّبِع الخطوات التالية:
أضِف رمزًا لاستيراد مكتبة العلامات. يُرجى العِلم أنّ الإصدار السابق من العلامات (google.maps.Marker) لا يفرض هذا الشرط.
تغيير google.maps.Marker إلى google.maps.marker.AdvancedMarkerElement
أضِف معرّف خريطة إلى رمز إعداد الخريطة. على سبيل المثال،
mapId: 'DEMO_MAP_ID' لأغراض الاختبار إذا لم يكن لديك معرّف
لوحة ربط
إضافة مكتبة "العلامات المتقدّمة"
تعتمد الطريقة التي تستخدمها لتحميل المكتبات على كيفية تحميل صفحة الويب لـ
Maps JavaScript API.
إذا كانت صفحة الويب تستخدم تحميل النصوص البرمجية الديناميكية، أضِف مكتبة العلامات و
استورِد AdvancedMarkerElement (وPinElement اختياريًا) أثناء التشغيل، كما هو موضح
هنا.
إذا كانت صفحة الويب تستخدم علامة تحميل النص البرمجي المباشر القديمة، أضِف
libraries=marker إلى النص البرمجي لتحميل المحتوى، كما هو موضّح في المقتطف التالي.
تعرض أمثلة الرموز البرمجية التالية رمزًا لإضافة علامة قديمة، متبوعًا
بالرمز الخاص بالمثال نفسه باستخدام العلامات المتقدّمة:
قبل نقل البيانات
// The location of Uluruconstposition={lat:-25.344,lng:131.031};constmap=newgoogle.maps.Map(document.getElementById("map"),{zoom:4,center:position,});// The marker, positioned at Uluruconstmarker=newgoogle.maps.Marker({map:map,position:position,title:'Uluru',});
بعد نقل البيانات
// The location of Uluruconstposition={lat:-25.344,lng:131.031};constmap=newgoogle.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 Uluruconstmarker=newgoogle.maps.marker.AdvancedMarkerElement({map,position:position,title:'Uluru',});
استكشاف ميزات العلامات المتقدّمة
يمكن تخصيص العلامات المتقدّمة بطرق لم تكن متاحة من قبل.
يمكنك الآن ضبط حجم (مقياس) العلامات وتغيير ألوان
الخلفية والحدود والرمز. أصبح من الأسهل التعامل مع صور الرسومات المخصّصة،
وأصبح من الممكن الآن إنشاء علامات مخصّصة باستخدام HTML وCSS. اطّلِع على مزيد من المعلومات
حول كل الإجراءات التي يمكنك اتّخاذها باستخدام العلامات المتقدّمة:
تاريخ التعديل الأخير: 2025-03-21 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-03-21 (حسب التوقيت العالمي المتفَّق عليه)"],[[["`google.maps.Marker` is deprecated as of February 21st, 2024 (v3.56) and developers should transition to `google.maps.marker.AdvancedMarkerElement`."],["Advanced markers require adding the marker library, changing the class name, and including a map ID during map initialization."],["Developers can customize advanced markers with features like adjustable size, custom colors, graphic images, and HTML/CSS composition."],["Several resources are available to learn more about advanced marker features such as basic customization, graphic markers, HTML/CSS markers, collision behavior, and accessibility."]]],["Google's `google.maps.Marker` is deprecated as of February 21st, 2024, in favor of `google.maps.marker.AdvancedMarkerElement`. To migrate, import the marker library, replace `google.maps.Marker` with the new class, and add a map ID to map initialization code (e.g., `mapId: 'DEMO_MAP_ID'`). Load the library dynamically with `google.maps.importLibrary(\"marker\")` or add `libraries=marker` to the script tag. Advanced markers offer enhanced customization, including size, color, and HTML/CSS-based designs.\n"]]