Marcadores

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. Além da altitude em que aparecem, é possível controlar a forma, o tamanho e a cor dos marcadores. O exemplo a seguir mostra um marcador básico:

O Maps JavaScript em 3D oferece duas classes de marcadores distintas, cada uma otimizada para usos específicos. A tabela a seguir mostra as diferenças e compensações entre as duas classes disponíveis:

Capacidade MarkerElement Marker3DElement
Personalização Alta (compatível com elementos HTML personalizados, APIs de animação principais etc.) Baixa (menos personalizável)
Desempenho Desempenho de interação mais baixo (queda de FPS com um grande número de marcadores) Desempenho de interação mais alto (otimizado para renderizar grandes conjuntos de dados)
Capacidade recomendada Desempenho de interação confiável para até cerca de 1.000 marcadores Recomendado para processar mais de 1.000 marcadores

Personalizar cor, escala e imagem do ícone

Personalize a cor do plano de fundo, do glifo, da borda e o tamanho do marcador padrão.

Marcadores personalizados

Substitua o ícone de marcador padrão por um recurso SVG personalizado.

Marcadores com gráficos

Definir a altitude do marcador

É possível definir a altitude do marcador extrudando-o e definindo a altitude.

Marcador extrudado

Como os marcadores podem responder a eventos de clique e de teclado

Para que um marcador responda a cliques e eventos de teclado, adicione um listener de eventos click.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

Definir o comportamento em caso de conflito do marcador

Especifique como um marcador deve se comportar quando entrar em conflito com outro marcador ou rótulo de mapa.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

Performance do marcador

Os marcadores HTML personalizados (MarkerElement) oferecem desempenho menor do que os marcadores 3D padrão (Marker3DElement). Para aplicativos com mais de 1.000 marcadores, a Marker3dElement classe é altamente recomendada para garantir a performance ideal.

Próxima etapa