Utilisez des repères pour attirer l'attention d'un utilisateur sur un emplacement sur une carte. Ce guide explique comment utiliser et personnaliser les repères dans les cartes 3D. Vous pouvez contrôler la forme, la taille et la couleur des repères, en plus de l'altitude à laquelle ils apparaissent.
Utilisez des repères pour afficher des lieux sur des cartes. L'exemple ci-dessus montre un repère de base unique sans personnalisation.
Personnaliser la couleur, la taille et l'image de l'icône
Personnalisez l'arrière-plan, le glyphe, la couleur et la taille de la bordure du repère par défaut.
Remplacez l'icône du repère par défaut par une ressource SVG personnalisée.
Définir l'altitude du repère
Vous pouvez définir l'altitude d'un repère en extruisant celui-ci, puis en définissant l'altitude.
Configurer les repères pour qu'ils répondent aux événements de clic et de clavier
Configurez un repère pour qu'il réponde aux événements de clic et de clavier en ajoutant un écouteur d'événements 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.
// ...
});
}
Définir le comportement en cas de collision de repères
Spécifiez comment un 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
});