Wydarzenia w Mapach Google
Kliknij znacznik, aby powiększyć
Nadal korzystamy z mapy z poprzedniej strony: mapy wyśrodkowanej na Londynie w Anglii.
Teraz chcemy powiększyć, gdy użytkownik kliknie znacznik (do znacznika dołączamy obsługę zdarzeń, która po kliknięciu powiększa mapę).
Oto dodany kod:
Przykład
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Rejestrujemy się w celu otrzymywania powiadomień o zdarzeniach za pomocą modułu obsługi zdarzeń addListener(). Ta metoda przyjmuje obiekt, zdarzenie do nasłuchiwania i funkcję do wywołania, gdy wystąpi określone zdarzenie.
Przesuń z powrotem do znacznika
Tutaj zapisujemy zmiany powiększenia i cofamy 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);
});
Otwórz okno informacyjne po kliknięciu znacznika
Kliknij znacznik, aby wyświetlić okno informacyjne z tekstem:
Przykład
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Ustaw znaczniki i otwórz InfoWindow dla każdego znacznika
Uruchom funkcję, gdy użytkownik kliknie na mapę.
Funkcja placeMarker() umieszcza znacznik w miejscu kliknięcia przez użytkownika i wyświetla okno informacyjne z długościami i szerokościami geograficznymi 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: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}