Zdarzenia Google Maps

Skalowanie przy kliknięciu na znacznik

Wciąż używamy mapy z poprzedniej strony: mapa z Londynu w Wielkiej Brytanii jako punktem centralnym.

Teraz chcemy skalować mapę przy kliknięciu na znacznik (dodajemy zdarzenie obsługiwać, aby skalować mapę przy kliknięciu).

To jest dodane kod:

Przykład

// Skalowanie do 9 przy kliknięciu na znacznik
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Używamy addListener() do rejestracji powiadomień o wydarzeniach. Parametry przyjmowane przez tę metodę to:

• Obiekt
• Zdarzenie do nasłuchiwania
• Funkcja wywoływana przy zdarzeniu

Przesunięcie mapy do znacznika

Tutaj zapisujemy zmianę skalowania i przesuwamy mapę po 3 sekundach:

Przykład

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

Okno informacyjne otwarte przy kliknięciu na znacznik

Okno informacyjne wyświetlane po kliknięciu na znacznik:

Przykład

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

Ustawienie znacznika i otwarcie okna informacyjnego dla każdego znacznika

Funkcja uruchamiana przy kliknięciu na mapie.

placeMarker() funkcja umieszcza znacznik w klikniętym miejscu i wyświetla okno informacyjne zawierające szerokość i długość geograficzną znacznika:

Przykład

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: 'Szerokość geograficzna: ' + location.lat() +
    'Długość geograficzna: ' + location.lng()
  });
  infowindow.open(map,marker);
}