Marcadores

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

Los mapas en 3D de la API 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 compensaciones entre las dos clases disponibles:

Función MarkerElement Marker3DElement
Personalización Alto (admite elementos HTML personalizados, APIs de animación principales, etcétera) Bajo (menos personalizable)
Rendimiento Menor rendimiento de interacción (disminución de FPS 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 Se recomienda para controlar más de 1,000 marcadores

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

Puedes personalizar el color del fondo, el borde y el glifo predeterminados del marcador, así como su tamaño.

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

Para configurar la altitud de un marcador, puedes extruirlo y establecer 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