Обзор маркеров

Выберите платформу: Android iOS JavaScript

Используйте маркеры для отображения отдельных местоположений на карте. В этом руководстве показано, как использовать расширенные маркеры. С помощью расширенные маркеры вы можете создавать и настраивать высокопроизводительные маркеры и делать доступными маркеры, которые реагируют на события щелчка DOM и ввод с клавиатуры. Для еще более глубокой настройки расширенные маркеры поддерживают использование пользовательских HTML и CSS, включая возможность создания полностью пользовательских маркеров. Для 3D-приложений вы можете контролировать высоту, на которой появляется маркер. Расширенные маркеры поддерживаются как на растровых, так и на векторных картах (хотя некоторые функции недоступны на растровых картах). Для использования расширенных маркеров требуется идентификатор карты (можно использовать DEMO_MAP_ID ).

Начните работу с продвинутыми маркерами

Настройте цвет, масштаб и изображение значка

Настройте фон маркера по умолчанию, глиф и цвет границы, а также отрегулируйте размер маркера.

Скриншот, показывающий некоторые настроенные маркеры.

Замените значок маркера по умолчанию на пользовательское изображение SVG или PNG.

Скриншот, показывающий пользовательские маркеры SVG.

Создавайте пользовательские HTML-маркеры

Используйте собственный HTML и CSS для создания визуально отличительных интерактивных маркеров и создания анимации.

Скриншот, показывающий пользовательский HTML-маркер.

Заставьте маркеры реагировать на щелчки и события клавиатуры

Заставьте маркер реагировать на щелчки и события клавиатуры, добавив прослушиватель событий click .

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 37.4239163, lng: -122.0947209},
    zoom: 17,
    mapId: 'DEMO_MAP_ID',
  });

  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  marker.addListener('click', ({domEvent, latLng}) => {
    const {target} = domEvent;
    // Handle the click event.
    // ...
  });
}

Установить высоту маркера и поведение при столкновении

Установите высоту для маркера, чтобы он правильно отображался с элементами 3D-карты, и укажите, как маркер должен себя вести при столкновении с другим маркером или меткой карты. Высота маркера поддерживается только на векторных картах.

Скриншот, показывающий маркер, скорректированный по высоте.

Следующий шаг