Google Maps Gebeurtenissen

Zoom in door op de markering te klikken

We gebruiken nog steeds de kaart van de vorige pagina: een kaart met Londen, Engeland als centrum.

Nu willen we dat we zoomen wanneer de gebruiker op de markering klikt (we voegen een eventhandler toe aan de markering om de kaart te zoomen bij klikken).

Dit is de toegevoegde code:

voorbeeld

// Zoom naar 9 bij klikken op markering
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

We gebruiken de addListener() eventhandler om eventmeldingen te registreren. De parameters die deze methode aanneemt zijn:

• Een object
• Een te luisteren gebeurtenis
• Een functie die wordt aangeroepen wanneer een specifieke gebeurtenis optreedt

Schuif terug naar de markering

Hier slaan we de zoomwijziging op en schuiven we de kaart na 3 seconden:

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

Informatievenster openen bij klikken op markering

Klik op de markering om een informatievenster met tekst te openen:

voorbeeld

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

Markering instellen en informatievenster voor elke markering openen

Deze functie wordt uitgevoerd wanneer de gebruiker op de kaart klikt.

placeMarker() functie plaatst een markering op de locatie waar de gebruiker klikt en toont een informatievenster met de breedte- en lengtegraad van die markering:

voorbeeld

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    positie: location,
    kaart: map
  });
  var infowindow = new google.maps.InfoWindow({
    inhoud: ' Breedbreed: ' + location.lat() +
    ' Breedbreed: ' + location.lng()
  });
  infowindow.open(map,marker);
}