Общие сведения о маркерах

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

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

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

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

Вы можете настроить цвет фона, глифа и контура, а также размер маркера.

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

Также можно заменить стандартный значок собственным изображением в формате SVG или PNG.

Скриншот, на котором показаны маркеры SVG

Маркеры с собственным HTML-кодом

С помощью собственного кода HTML и CSS можно создавать интерактивные и анимированные маркеры с уникальным дизайном.

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

Маркеры, реагирующие на клики и нажатия клавиш

С помощью прослушивателя событий gmp-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.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

Настройка высоты расположения маркера и его поведения при наложении на другие элементы

Если вы используете 3D-объекты, то можете задавать высоту расположения маркера, чтобы он был размещен в нужном месте. Кроме того, можно указать, как маркер будет себя вести при наложении на другой маркер или ярлык. Высоту можно задать только на векторной карте.

Скриншот, на котором показан маркер с заданной для него высотой расположения

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