Evenemang Google-karta

Zooma genom att klicka på markören

Vi använder fortfarande kartan från föregående sida: en karta med London, Storbritannien som centrum.

Nu vill vi att kartan ska zoomas när användaren klickar på markören (vi lägger till en eventhanterare till markören för att zooma kartan vid klick).

Detta är det tillagda koden:

Exempel

// Zooma till 9 när markören klickas
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Vi använder addListener() eventhanterare för att registrera händelsenotiser. Metoden accepterar följande parametrar:

• Ett objekt
• Ett händelse att lyssna på
• En funktion som anropas vid ett specifikt händelse

Flytta tillbaka till markören

Här sparar vi zoomförändringar och flyttar kartan tillbaka till markören efter 3 sekunder:

Exempel

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

Öppna informationstavlan när markören klickas

Klicka på markören för att visa en informationstavla med text:

Exempel

var infowindow = new google.maps.InfoWindow({
  innehåll: "Hej Världen!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Ställ in markörer och öppna informationstavlor för varje markör

Funktionen körs när användaren klickar på kartan.

placeMarker() funktionen lägger en markör på användarens klickplats och visar en informationstavla som innehåller markörens latitud och longitud:

Exempel

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    karta: map
  });
  var infowindow = new google.maps.InfoWindow({
    innehåll: 'Bredd: ' + location.lat() +
    'Längd: ' + location.lng()
  });
  infowindow.open(map,marker);
}