Функция "Расширенные маркеры" открывает новые возможности для создания и настройки высокоэффективных маркеров. Например, с ее помощью вы можете выбрать фон, контур, цвет глифа и размер вместо заданных по умолчанию, а также заменить стандартный значок каким-либо другим. Кроме того, можно сделать так, чтобы маркер реагировал на клики DOM и нажатия клавиш. Также вы можете использовать собственный код HTML и CSS для более детальной настройки, в том числе для создания маркеров с нуля. При показе с 3D-объектами можно задать высоту, на которой будет располагаться маркер. Расширенные маркеры доступны как на растровых, так и на векторных картах (вам нужно будет указать идентификатор карты).
Начать работу с расширенными маркерами
Настройка цвета, размера и изображения значка
Вы можете настроить фон, глиф, контур, цвет и размер маркера.
Также можно заменить стандартный значок собственным изображением в формате 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 markerView = new google.maps.marker.AdvancedMarkerView({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
markerView.addListener('click', ({domEvent, latLng}) => {
const {target} = domEvent;
// Handle the click event.
// ...
});
}
Настройка высоты маркера и поведения при наложении
Вы можете задать высоту маркера, чтобы правильно расположить его на 3D-объекте, а также определить алгоритм отображения при пересечении с другим маркером или ярлыком. Высоту маркера можно задать только на векторной карте.
