Com os Marcadores Avançados, você cria e personaliza marcadores de alta performance. Personalize a cor do plano de fundo, da borda e do glifo do marcador, ajuste o tamanho dele e substitua o ícone padrão por uma imagem personalizada. Crie marcadores acessíveis que respondam a eventos de clique e a entradas de teclado do DOM. Os Marcadores Avançados aceitam HTML e CSS personalizados e permitem a criação de marcadores totalmente sob medida. Para aplicativos 3D, você pode controlar a altitude em que um marcador aparece. Os Marcadores Avançados podem ser usados em mapas vetoriais e rasterizados (um ID do mapa é necessário).
Comece a usar Marcadores Avançados
Personalizar cor, escala e imagem do ícone
Personalize a cor do plano de fundo, do glifo e da borda do marcador padrão e ajuste o tamanho dele.
Substitua o ícone de marcador padrão por uma imagem SVG ou PNG personalizada.
Criar marcadores HTML personalizados
Use HTML e CSS personalizados para criar marcadores interativos visualmente distintos e animações.
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 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.
// ...
});
}
Definir a altitude e o comportamento em caso de conflito de marcadores
Defina a altitude para que um marcador apareça corretamente com elementos de mapa 3D e especifique como ele vai se comportar quando colidir com outro marcador ou rótulo de mapa. Somente os mapas vetoriais oferecem suporte para altitude do marcador.
