به نشانگرهای پیشرفته مهاجرت کنید

از تاریخ ۲۱ فوریه ۲۰۲۴ (نسخه ۳.۵۶)، google.maps.Marker منسوخ شده است. ما شما را تشویق می‌کنیم که به کلاس جدید google.maps.marker.AdvancedMarkerElement بروید. نشانگرهای پیشرفته پیشرفت‌های قابل توجهی نسبت به کلاس قدیمی google.maps.Marker ارائه می‌دهند. درباره این منسوخ شدن بیشتر بدانید.

برای به‌روزرسانی یک نشانگر قدیمی به یک نشانگر پیشرفته، مراحل زیر را انجام دهید:

  1. کد را برای وارد کردن کتابخانه نشانگر اضافه کنید (مراحل زیر را ببینید).
  2. google.maps.Marker به google.maps.marker.AdvancedMarkerElement تغییر دهید؛ اگر عبارت import شما AdvancedMarker را اعلام کند، می‌توانید مسیر واجد شرایط را حذف کنید.
  3. یک شناسه نقشه به کد مقداردهی اولیه نقشه خود اضافه کنید. برای مثال، اگر از قبل شناسه نقشه ندارید، برای اهداف آزمایشی mapId: 'DEMO_MAP_ID' کنید.

کتابخانه نشانگر پیشرفته را اضافه کنید

روشی که برای بارگذاری کتابخانه‌ها استفاده می‌کنید بستگی به نحوه بارگذاری API جاوا اسکریپت Maps در صفحه وب شما دارد.

  • اگر صفحه وب شما از کتابخانه پویا برای وارد کردن استفاده می‌کند، کتابخانه نشانگرها را اضافه کنید و 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>

درباره بارگیری API جاوا اسکریپت Maps بیشتر بدانید

مثال‌ها

نمونه‌های کد زیر، کدی برای اضافه کردن یک نشانگر قدیمی و به دنبال آن کدی برای همان مثال با استفاده از نشانگرهای پیشرفته را نشان می‌دهند:

قبل از مهاجرت 

// 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.
const { Map } = await.google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new 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 AdvancedMarkerElement({
    map,
    position: position,
    title: 'Uluru/Ayers Rock',
});

ویژگی‌های پیشرفته نشانگر را بررسی کنید

نشانگرهای پیشرفته را می‌توان به روش‌هایی که قبلاً امکان‌پذیر نبود، سفارشی کرد. اکنون می‌توانید اندازه (مقیاس) نشانگرها را تنظیم کنید و رنگ‌های پس‌زمینه، حاشیه و علامت را تغییر دهید. کار با تصاویر گرافیکی سفارشی ساده‌تر شده است و اکنون می‌توان نشانگرهای سفارشی را با استفاده از HTML و CSS ایجاد کرد. درباره هر کاری که می‌توانید با نشانگرهای پیشرفته انجام دهید، بیشتر بدانید: