Google Maps-Veranstaltungen

Inhaltsverzeichnis

Klicken Sie auf eine Markierung, um die Karte zu vergrößern

Öffnet ein Informationsfenster, wenn auf eine Markierung geklickt wird.

Richten Sie Markierungen ein und öffnen Sie Informationsfenster für jede Markierung

Klicken Sie auf eine Markierung, um die Karte zu vergrößern – Ereignis an Google Maps gebunden.

Klicken Sie auf eine Markierung, um die Karte zu vergrößern

Wir verwenden immer noch die im vorherigen Artikel verwendete Karte von London, England.

Implementieren Sie die Funktion zum Zoomen der Karte, wenn der Benutzer auf die Markierung klickt (bindet das Kartenzoomereignis, wenn auf die Markierung geklickt wird).

Code wie folgt anzeigen:

// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Verwenden Sie den Ereignishandler addListener(), um Ereignis-Listener zu registrieren. Diese Methode verwendet ein Objekt und ein Ereignis, um darauf zu warten, und die Funktion wird aufgerufen, wenn das angegebene Ereignis eintritt.

Reset-Markierung

Wir ändern die Eigenschaft „center“, indem wir der Karte einen Event-Handler hinzufügen. Der folgende Code verwendet das Ereignis „center_changed“, um den Mittelpunkt nach 3 Sekunden zu markieren:

google.maps.event.addListener(map,'center_changed',function() {
  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
});

Öffnet ein Informationsfenster, wenn auf eine Markierung geklickt wird.

Durch Klicken auf die Markierung werden einige Textinformationen im Informationsfenster angezeigt:

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

Richten Sie Markierungen ein und öffnen Sie Informationsfenster für jede Markierung

Führt ein Fenster aus, wenn der Benutzer auf die Karte klickt

Wenn der Benutzer auf einen bestimmten Ort auf der Karte klickt, verwenden Sie die Funktion placeMarker(), um eine Markierung an dem angegebenen Ort zu platzieren und ein Informationsfenster zu öffnen:

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});
 
function placeMarker(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);
}