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

اعتبارًا من 21 فبراير 2024 (الإصدار 3.56)، تم إيقاف google.maps.Marker نهائيًا. ننصحك بالانتقال إلى فئة google.maps.marker.AdvancedMarkerElement الجديدة. توفّر العلامات المتقدّمة تحسينات كبيرة مقارنةً بفئة google.maps.Marker القديمة. مزيد من المعلومات عن الإيقاف النهائي

لترقية علامة قديمة إلى علامة متقدّمة، اتّبِع الخطوات التالية:

1. أضِف رمزًا لاستيراد مكتبة العلامات (راجِع الخطوات أدناه).
2. غيِّر google.maps.Marker إلى google.maps.marker.AdvancedMarkerElement. إذا كانت عبارة الاستيراد تعرِّف AdvancedMarker، يمكنك حذف المسار المؤهَّل.
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>

مزيد من المعلومات حول تحميل 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',
});

بعد نقل الحسابات

// Import the needed libraries.
// Not required if the legacy direct script loading tag is in use.
await google.maps.importLibrary('maps') as google.maps.MapsLibrary;
await google.maps.importLibrary('marker') as google.maps.MarkerLibrary;

// 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/Ayers Rock',
});

استكشاف ميزات العلامات المتقدّمة

يمكن تخصيص العلامات المتقدّمة بطرق لم تكن ممكنة من قبل. يمكنك الآن ضبط حجم (مقياس) العلامات وتغيير ألوان الخلفية والحدود والرمز الرسومي. أصبح التعامل مع الصور الرسومية المخصّصة أسهل، ويمكن الآن إنشاء محدّدات مواقع مخصّصة باستخدام HTML وCSS. مزيد من المعلومات حول كل ما يمكنك فعله باستخدام العلامات المتقدّمة:

• أضِف علامة إلى خريطة.
• التخصيص الأساسي للعلامات
• إنشاء علامات باستخدام الرسومات
• إنشاء علامات باستخدام HTML وCSS
• التحكّم في سلوك التصادم والارتفاع ومستوى الظهور
• جعل العلامات قابلة للنقر وسهلة الوصول