Événements de cartes Google

Zoomer en cliquant sur le marqueur

Nous utilisons toujours la carte de la page précédente : une carte centrée sur Londres, en Angleterre.

Maintenant, nous voulons zoomer lorsque l'utilisateur clique sur le marqueur (nous attachons un gestionnaire d'événements à la marqueur pour zoomer sur la carte lors du clic).

Voici le code ajouté :

Exemple

// Zoom à 9 lorsque le marqueur est cliqué
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Nous utilisons l'analyseur d'événements addListener() pour enregistrer les notifications d'événements. Les paramètres acceptés par cette méthode sont :

• Un objet
• Un événement à surveiller
• Une fonction appelée lors de l'occurrence d'un événement spécifique

Retourner à la position du marqueur

Ici, nous sauvegardons les modifications de zoom et déplaç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'information au clic sur le marqueur

Cliquez sur le marqueur pour afficher une fenêtre d'information contenant 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 les marqueurs et ouvrir une fenêtre d'information pour chaque marqueur

La fonction est exécutée lorsque l'utilisateur clique sur la carte.

La fonction placeMarker() place un marqueur à l'emplacement cliqué par l'utilisateur et affiche une fenêtre d'information contenant la latitude et la longitude de ce 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);
}