Événements Google Maps
Cliquez sur le marqueur pour zoomer
Nous utilisons toujours la carte de la page précédente : une carte centrée sur Londres, en Angleterre.
Maintenant, nous voulons zoomer lorsqu'un utilisateur clique sur le marqueur (nous attachons un gestionnaire d'événements à un marqueur qui zoome sur la carte lorsqu'il est cliqué).
Voici le code ajouté :
Exemple
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Nous nous enregistrons pour les notifications d'événements à l'aide du gestionnaire d'événements addListener(). Cette méthode prend un objet, un événement à écouter et une fonction à appeler lorsque l'événement spécifié se produit.
Revenir au marqueur
Ici, nous enregistrons les modifications de zoom et replaçons la carte après 3 secondes :
Exemple
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
Ouvrir une fenêtre d'informations en cliquant sur le marqueur
Cliquez sur le marqueur pour afficher une fenêtre d'informations avec du texte :
Exemple
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Définir des marqueurs et ouvrir la fenêtre d'informations pour chaque marqueur
Exécute une fonction lorsque l'utilisateur clique sur la carte.
La fonction placeMarker() place un marqueur là où l'utilisateur a cliqué et affiche une fenêtre d'informations avec les latitudes et longitudes du marqueur :
Exemple
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}