Google Maps Hændelser

Zoom ved at klikke på markøren

Vi bruger stadig kortet fra sidste side: et kort med London, Storbritannien som centrum.

Nu ønsker vi at zoome, når brugeren klikker på markøren (vi tilføjer en eventhandler til markøren for at zoome kortet ved klik)

Dette er tilføjede kode:

eksempel

// Zoom til 9, når markøren klikkes
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Vi bruger addListener() eventhandleren til at registrere begivenhedsnotifikationer. Metoden accepterer følgende parametre:

• Et objekt
• En begivenhed, der skal lyttes til
• En funktion, der kaldes ved en bestemt begivenhed

Flyt tilbage til markøren

Her gemmer vi zoomændringerne og flytter kortet tilbage til markøren efter 3 sekunder:

eksempel

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

Åbn informationstavlen, når markøren klikkes

Klik på markøren for at vise en informationstavle med tekst:

eksempel

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

Opsæt markør og åbn informationstavle for hver markør

Funktionen kører, når brugeren klikker på kortet.

placeMarker() funktionen placerer en markør på brugerens klikposition og viser en informationstavle med markørens bredde- og længdegrad:

eksempel

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    kort: map
  });
  var infowindow = new google.maps.InfoWindow({
    indhold: 'Breddegrad: ' + location.lat() +
    'Længdegrad: ' + location.lng()
  });
  infowindow.open(map, marker);
}