Ereignisse in Google-Maps

Zoomen durch Klicken auf den Marker

Wir verwenden immer noch die Karte von der vorherigen Seite: Eine Karte von London, Großbritannien.

Jetzt möchten wir, dass beim Klick auf den Marker gezoomt wird (wir fügen einen Event-Handler zum Marker hinzu, um das Zoomen der Karte beim Klick zu ermöglichen).

Dies ist der hinzugefügte Code:

Beispiel

// Bei Klick auf den Marker auf Zoom 9 zoomen
google.maps.event.addListener(marker,'click',function() {
  karte.setZoom(9);
  karte.setCenter(marker.getPosition());
});

Wir verwenden den Event-Handler addListener() zur Registrierung von Ereignisbenachrichtigungen. Die Parameter, die dieses Verfahren akzeptiert, sind:

• Ein Objekt
• Ein zu überwachendes Ereignis
• Eine Funktion, die bei Eintreten eines bestimmten Ereignisses aufgerufen wird

Karte zurück zum Marker bewegen

Hier speichern wir die Zoomänderung und bewegen die Karte nach 3 Sekunden:

Beispiel

google.maps.event.addListener(marker,'click',function() {
  var pos = karte.getZoom();
  karte.setZoom(9);
  karte.setCenter(marker.getPosition());
  window.setTimeout(function() {karte.setZoom(pos);},3000);
});

Infofenster wird geöffnet, wenn der Marker geklickt wird

Klicken Sie auf den Marker, um ein Infofenster mit Text anzuzeigen:

Beispiel

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

Markierung setzen und Infofenster für jeden Marker öffnen

Funktion wird ausgeführt, wenn der Benutzer auf die Karte klickt.

placeMarker() Funktion platziert einen Marker an der vom Benutzer geklickten Position und zeigt eine Infoanzeige mit der Breite und Länge des Markers an:

Beispiel

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    Position: location,
    Karte: map
  });
  var infowindow = new google.maps.InfoWindow({
    Inhalt: 'Breite: ' + location.lat() +
    '<br>Breite: ' + location.lng()
  });
  infowindow.open(map,marker);
}