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

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