Utilisez des repères pour attirer l'attention d'un utilisateur sur un lieu sur une carte. Ce guide explique comment utiliser et personnaliser des repères dans les cartes 3D. Vous pouvez contrôler la forme, la taille et la couleur des repères, ainsi que l'altitude à laquelle ils apparaissent.
Utilisez des repères pour afficher des lieux sur des cartes. L'exemple ci-dessus montre un repère unique de base sans personnalisation.
Personnaliser la couleur, la taille et l'icône
Personnalisez la couleur et la taille de l'arrière-plan, du glyphe et de la bordure du repère par défaut.
Remplacez l'icône par défaut du repère par une ressource SVG personnalisée.
Définir l'altitude du repère
Vous pouvez définir l'altitude d'un repère en l'extrudant et en définissant l'altitude.
Configurer les repères pour qu'ils répondent aux événements de clic et de clavier
Ajoutez un écouteur d'événements click pour que le repère puisse répondre aux événements de clic et de clavier.
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.
// ...
});
}
Définir le comportement en cas de collision de repères
Spécifiez comment le repère doit se comporter en cas de collision avec un autre repère ou libellé de carte.
const marker = new Marker3DElement({
position: {lat, lng},
collisionBehavior: google.maps.CollisionBehavior.REQUIRED
});