Google Maps Eventi

Fare clic sul marcatore per ingrandire - collegare i gestori di eventi per le mappe di Google.

Fare clic sull'indicatore di Zoom

Usiamo ancora la mappa dalla pagina precedente: una mappa centrata su Londra, Inghilterra.

Ora vogliamo ingrandire quando un utente è quello di cliccare sul marcatore (Attribuiamo un gestore di eventi per un indicatore che ingrandisce la mappa quando si fa 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());
});

Prova tu stesso "

Registriamo per le notifiche degli eventi utilizzando il addListener() gestore di eventi. Questo metodo prende un oggetto, un evento per ascoltare, e una funzione da chiamare quando si verifica l'evento specificato.

Pan Torna a Marker

Qui, si aggiunge un gestore di eventi per la mappa per le modifiche alla proprietà 'centro' e scorrere la mappa alla marcatore dopo 3 secondi su un evento center_changed:

Esempio

google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

Prova tu stesso "

Aprire un InfoWindow Cliccando sul Marker

Cliccare sul marcatore per mostrare un infowindow con un testo:

Esempio

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Prova tu stesso "

Impostare i marcatori e Open InfoWindow per ogni marcatore

Eseguire una funzione quando l'utente fa clic sulla mappa.

Il placeMarker() funzione pone un marcatore in cui l'utente ha cliccato, e mostra un infowindow con le latitudini e longitudini del marcatore:

Esempio

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(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);
}

Prova tu stesso "