Google Maps -evenementen
Klik op de markering om te zoomen
We gebruiken nog steeds de kaart van de vorige pagina: een kaart gecentreerd op Londen, Engeland.
Nu willen we zoomen wanneer een gebruiker op de markering klikt (we koppelen een gebeurtenishandler aan een markering die op de kaart zoomt wanneer erop wordt geklikt).
Hier is de toegevoegde code:
Voorbeeld
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
We registreren voor gebeurtenismeldingen met behulp van de addListener() gebeurtenishandler. Die methode heeft een object nodig, een gebeurtenis om naar te luisteren en een functie om aan te roepen wanneer de opgegeven gebeurtenis plaatsvindt.
Terug naar markering pannen
Hier slaan we de zoomwijzigingen op en pannen de kaart na 3 seconden terug:
Voorbeeld
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);
});
Open een InfoWindow wanneer u op de markering klikt
Klik op de markering om een infovenster met wat tekst te tonen:
Voorbeeld
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Markeringen instellen en Infovenster openen voor elke markering
Voer een functie uit wanneer de gebruiker op de kaart klikt.
De functie placeMarker() plaatst een markering waar de gebruiker heeft geklikt, en toont een infovenster met de breedte- en lengtegraden van de markering:
Voorbeeld
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);
}