Marcadores

Usa marcadores para llamar la atención del usuario hacia una ubicación en un mapa. En esta guía, se muestra cómo usar y personalizar marcadores en mapas 3D. Puedes controlar la forma, el tamaño y el color de los marcadores, además de la altitud a la que aparecen. En el siguiente ejemplo, se muestra un marcador básico:

Los mapas en 3D de Maps JavaScript proporcionan dos clases de marcadores distintas, cada una optimizada para usos específicos. En la siguiente tabla, se muestran las diferencias y las ventajas y desventajas entre las dos clases disponibles:

Función MarkerElement Marker3DElement
Personalización Alta (admite elementos HTML personalizados, APIs de animación principales, etcétera) Baja (menos personalizable)
Rendimiento Menor rendimiento de la interacción (los FPS disminuyen con una gran cantidad de marcadores) Mayor rendimiento de la interacción (optimizado para renderizar grandes conjuntos de datos)
Capacidad recomendada Rendimiento confiable de la interacción con hasta alrededor de 1,000 marcadores Se recomienda para controlar más de 1,000 marcadores.

Personaliza el color, la escala y la imagen del ícono

Puedes personalizar el color, el tamaño, el fondo y el glifo predeterminados del marcador.

Marcadores personalizados

Reemplaza el ícono de marcador predeterminado por un recurso SVG personalizado.

Marcadores con gráficos

Cómo configurar la altitud de un marcador

Puedes establecer la altitud del marcador extruyéndolo y configurando la altitud.

Marcador extruido

Configura los marcadores para que respondan a los eventos de clic y de teclado

Para lograr que un marcador responda a los eventos de clic y teclado, agrega un objeto de escucha de eventos click.

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

Establece el comportamiento de colisión del marcador

Especifica cómo debe comportarse el marcador cuando colisione con otro o con una etiqueta del mapa.

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

Rendimiento de los marcadores

Los marcadores HTML personalizados (MarkerElement) ofrecen un rendimiento inferior al de los marcadores 3D estándar (Marker3DElement). Para las aplicaciones con más de 1,000 marcadores, se recomienda usar la clase Marker3dElement para garantizar un rendimiento óptimo.

Próximo paso