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 en la que aparecen.

Usa marcadores para mostrar ubicaciones en los mapas. En el ejemplo anterior, se muestra un marcador básico único sin personalización aplicada.

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

Puedes personalizar 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

Para definir la altitud del marcador, expulsa el marcador y configura 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 del 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 un marcador cuando colisione con otro o con una etiqueta del mapa.

const marker = new Marker3DElement({
    position: {lat, lng},
    collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});

Próximo paso