Eventi di Google Maps

Zoomare cliccando sul segnalino

Stiamo ancora usando la mappa della pagina precedente: una mappa centrata su Londra, Inghilterra.

Ora, desideriamo zoomare quando l'utente clicca sul segnalino (abbiamo aggiunto un elaboratore di eventi al segnalino per zoomare la mappa quando si clicca).

Ecco il codice aggiunto:

Esempio

// Zoom a 9 quando si clicca sul segnalino
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Usiamo l'elaboratore di eventi addListener() per registrare le notifiche di evento. I parametri accettati da questo metodo sono:

• Un oggetto
• Un evento da ascoltare
• Una funzione chiamata quando si verifica un evento specifico

Spostarsi indietro al segnalino

Qui salviamo le modifiche di zoom e spostiamo la mappa dopo 3 secondi:

Esempio

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);
});

Aprire una finestra informativa quando si clicca sul segnalino

Cliccando sul segnalino viene visualizzata una finestra informativa contenente il testo:

Esempio

var infowindow = new google.maps.InfoWindow({
  contenuto: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Impostare il segnalino e aprire una finestra informativa per ogni segnalino

La funzione viene eseguita quando l'utente clicca sulla mappa.

La funzione placeMarker() posizionerà un segnalino all'indirizzo cliccato dall'utente e mostrerà una finestra informativa contenente la latitudine e la longitudine del segnalino:

Esempio

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    posizione: location,
    mappa: map
  });
  var infowindow = new google.maps.InfoWindow({
    contenuto: 'Latitudine: ' + location.lat() +
    '<br>Longitudine: ' + location.lng()
  });
  infowindow.open(map,marker);
}