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

Выберите платформу: 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.
    // ...
  });
}

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

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

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

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