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

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

درباره این منسوخ شدن بیشتر بدانید

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

  1. کدی را برای وارد کردن کتابخانه نشانگر اضافه کنید. توجه داشته باشید که نسخه قبلی نشانگرها ( google.maps.Marker ) این الزام را ندارد.
  2. google.maps.Marker به google.maps.marker.AdvancedMarkerElement تغییر دهید.
  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',
});

پس از مهاجرت 

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

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

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