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

Поддержка google.maps.Marker (v3.56) прекращена с 21 февраля 2024 г. Рекомендуем перейти на новый класс google.maps.marker.AdvancedMarkerElement. Расширенные маркеры отличаются множеством существенных улучшений по сравнению с устаревшим классом google.maps.Marker. Подробнее о прекращении поддержки…

Чтобы осуществить переход на новый класс, выполните следующие шаги:

  1. Добавьте код для импорта библиотеки маркеров (см. инструкции ниже).
  2. Замените google.maps.Marker на google.maps.marker.AdvancedMarkerElement. Если в операторе импорта объявлен AdvancedMarker, можно опустить квалифицированный путь.
  3. Добавьте идентификатор mapId в код инициализации карты Например, 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…

Примеры

Ниже показан фрагмент кода с устаревшим классом Marker и далее – тот же самый код, в котором этот класс заменен на AdvancedMarkerElement.

До перехода

// 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. Подробнее об этом можно узнать из следующих статей: