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

از 21 فوریه 2024 (نسخه 3.56)، 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' برای اهداف آزمایشی اگر قبلاً شناسه نقشه ندارید.

کتابخانه Advanced Marker را اضافه کنید

روشی که برای بارگیری کتابخانه ها استفاده می کنید بستگی به نحوه بارگیری صفحه وب شما 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',
});

بعد از مهاجرت 

  // 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 نوشت. درباره هر کاری که می توانید با نشانگرهای پیشرفته انجام دهید بیشتر بدانید: