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

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

Начните работу с расширенными маркерами

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

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

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

Создание собственных HTML-маркеров

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

Заставьте маркеры реагировать на нажатия клавиш и события клавиатуры.

Заставьте маркер реагировать на щелчки и события клавиатуры, добавив прослушиватель событий 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.
    // ...
  });
}

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

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

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

• Начните работу с расширенными маркерами