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

Выберите платформу: 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-элементах карты, а также укажите, как маркер должен вести себя при столкновении с другим маркером или меткой карты. Высота маркера поддерживается только на векторных картах.

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

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