Marcadores

Usa marcadores para llamar la atención de los usuarios 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 (los FPS disminuyen 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.

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 configurar la altitud del marcador extruyéndolo y estableciendo la altitud.

Marcador extruido

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.

function initMap() {
  const map = new Map3DElement({
    center: { lat: 37.4690, lng: -122.1074, altitude: 0 },
    tilt: 67.5,
    range: 45000,
    mode: MapMode.HYBRID
  });

  const interactiveMarker = new google.maps.marker.Marker3DInteractiveElement({
    map,
    position: {lat: 37.4239163, lng: -122.0947209},
  });

  interactiveMarker.addEventListener('gmp-click', (event) => {
    // Handle the click event.
    // ...
  });
}

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},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

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