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

اعتبارًا من 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' لأغراض الاختبار إذا لم يكن لديك رقم تعريف خريطة بعد.

إضافة مكتبة "العلامات المتقدّمة"

تعتمد الطريقة التي تستخدمها لتحميل المكتبات على كيفية تحميل صفحة الويب لـ 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>

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