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.
Usa marcadores para mostrar ubicaciones en los mapas. En el ejemplo anterior, se muestra un marcador básico único sin personalización.
Personaliza el color, la escala y la imagen del ícono
Puedes personalizar el color y el tamaño del fondo, el glifo y el borde predeterminados del marcador.
Reemplaza el ícono de marcador predeterminado por un recurso SVG personalizado.
Cómo configurar la altitud de un marcador
Puedes establecer la altitud del marcador extruyéndolo y configurando la altitud.
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.
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
});