Перейти на расширенные маркеры

Начиная с 21 февраля 2024 г. (версия 3.56), класс 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' для целей тестирования, если у вас еще нет идентификатора карты.

Добавьте библиотеку расширенных маркеров.

Способ загрузки библиотек зависит от того, как ваша веб-страница загружает 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>

Узнайте больше о загрузке 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. Узнайте больше обо всех возможностях расширенных маркеров: