Use marcadores para chamar a atenção do usuário para um local no mapa. Este guia demonstra como usar e personalizar marcadores em mapas 3D. Você pode controlar a forma, o tamanho e a cor dos marcadores, além da altitude em que eles são exibidos.
Use marcadores para mostrar locais no mapa. O exemplo acima mostra um marcador básico único sem personalização aplicada.
Personalizar cor, escala e imagem do ícone
Personalize o plano de fundo, o glifo, a cor da borda e o tamanho do marcador padrão.
Substitua o ícone do marcador padrão por um recurso SVG personalizado.
Definir a altitude do marcador
Você pode definir a altitude do marcador excluindo o marcador e definindo a altitude.
Como os marcadores podem responder a eventos de clique e de teclado
Para que um marcador responda a eventos de clique e de teclado, adicione um listener de eventos click.
function initMap() {
const map = new Map3DElement({
center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
tilt: 67.5,
range: 45000,
mode: MapMode.HYBRID
});
const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
map,
position: {lat: 37.4239163, lng: -122.0947209},
});
interactiveMarker.addEventListener('gmp-click', (event) => {
// Handle the click event.
// ...
});
}
Definir o comportamento em caso de conflito do marcador
Especifique como um marcador deve se comportar quando colidir com outro marcador ou rótulo de mapa.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});