انتقال به نشانگرهای پیشرفته

از ۲۱ فوریه ۲۰۲۴ (۲ اسفند ۱۴۰۲) (نسخه ۳.۵۶)، 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 ساخت. درباره کارهایی که می‌توانید با نشانگرهای پیشرفته انجام دهید بیشتر بدانید: