Latest web development tutorials

Google Maps Event

Fare clic su un marcatore per ingrandire - vincolante sulla mappa di Google eventi.


Fare clic su un marcatore cliccare sulla carta

Usiamo ancora mappa cartacea di nuovo con Londra.

Indirizza gli utenti da raggiungere quando il marcatore viene cliccato funzione zoom (zoom mappa marcatore viene cliccato evento vincolante).

Il codice è il seguente:

Esempi

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

Prova »

Utilizzare addListener) gestore di eventi (per registrare un listener di eventi. Il metodo utilizza un oggetto, un evento per ascoltare, quando si verifica un determinato evento si chiamerà.


ripristino bandiera

Aggiungiamo un gestore di eventi per la mappa per modificare la proprietà 'centro', utilizzare il seguente codice dopo 3 secondi di eventi center_changed saranno contrassegnati Centro turno:

Esempi

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

Prova »


Quando l'indicatore si fa clic per aprire la finestra di informazioni.

Fare clic su un marcatore per visualizzare un testo nella finestra dei messaggi:

Esempi

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

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

Prova »


Impostare l'etichetta e le informazioni tag per ogni finestra aperta

Realizzazione di una finestra quando l'utente fa clic sulla mappa

Gli utenti fanno clic sulla mappa per una funzione di posizione di segnaposto () sul luogo designato per posizionare un marcatore, e pop-up finestra di messaggio:

Esempi

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 »


Google Maps - Manuale di eventi

Google Maps API Reference Manual .