Marcadores

Usa marcadores para llamar la atención de un 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 3D en 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 compensaciones 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 interacción (FPS disminuye con una gran cantidad de marcadores)	Mayor rendimiento de interacción (optimizado para renderizar conjuntos de datos grandes)
Capacidad recomendada	Rendimiento de interacción confiable hasta alrededor de 1,000 marcadores	Recomendado para controlar más de 1,000 marcadores

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

Personaliza el fondo, el glifo, el color del borde y el tamaño predeterminados del marcador.

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

Cómo configurar la altitud de un marcador

Puedes configurar la altitud del marcador extruyéndolo y estableciendo la altitud.

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

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

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

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',
});
index.js

Rendimiento del marcador

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

• Agrega un marcador.