Eventi di Google Maps
Fare clic sull'indicatore per ingrandire
Utilizziamo ancora la mappa della pagina precedente: una mappa centrata su Londra, in Inghilterra.
Ora vogliamo eseguire lo zoom quando un utente fa clic sull'indicatore (alleghiamo un gestore di eventi a un indicatore che ingrandisce la mappa quando viene fatto clic).
Ecco il codice aggiunto:
Esempio
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Ci registriamo per le notifiche di eventi utilizzando il gestore di eventi addListener(). Quel metodo accetta un oggetto, un evento da ascoltare e una funzione da chiamare quando si verifica l'evento specificato.
Ritorna al marcatore
Qui salviamo le modifiche allo zoom e spostiamo indietro 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 fa clic sull'indicatore
Fare clic sull'indicatore per visualizzare una finestra informativa con del testo:
Esempio
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Imposta i marker e apri la finestra delle informazioni per ciascun marker
Eseguire una funzione quando l'utente fa clic sulla mappa.
La funzione placeMarker() posiziona un marker dove l'utente ha cliccato e mostra una finestra informativa con le latitudini e le longitudini del marker:
Esempio
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);
}