www.gmapsapi.com

Kompleksowy kurs podstaw API, po którym mapowianie nie będzie miało przed Tobą żadnych tajemnic!

Setki przykładów, kursów i poradników z kodem gotowym do skopiowania i korzystania.

Największa strona o Google Maps API w Polsce, największe źródło informacji w języku polskim.

Zdarzenia

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

W tej części kursu nauczysz się, jak sprawnie przechwytywać różne zdarzenia z mapy. Dzięki nim będziesz w stanie wykonać pewne akcje, gdy na przykład:

  • zostanie wciśnięty lewy przycisk myszy
  • użytkownik kliknie na markerze
  • zmieni się pole widzenia mapy

i wiele, wiele innych

Ogólna struktura przechwytywania zdarzeń

Do obsługi zdarzeń używa się funkcji addListener() z przestrzeni nazw google.maps.event.

Funkcja addListener() przyjmuje trzy argumenty:

  • pierwszy to obiekt, którego tyczy się zdarzenie
  • drugi to string - rodzaj zdarzenia (patrz tabelka niżej)
  • trzeci to funkcja, która zostanie wywołana po wykryciu zajścia zdarzenia

Ilość i rodzaj przekazywanych parametrów przez funkcję podpiętą do zdarzenia może być różny i zależy od konkretnego przypadku użycia.

Przykład 1 - zdarzenie click na mapie

Przykładowe dodanie obsługi zdarzenia kliknięcia na mapę

google.maps.event.addListener(mapa,'click',function(zdarzenie)
{
	if(zdarzenie.latLng)	
	{
		dymek.setContent('Współrzędne GPS klikniętego punktu:
'+zdarzenie.latLng); dymek.setPosition(zdarzenie.latLng); dymek.open(mapa); } });

W tym przykładzie tworzymy obsługę zdarzenia kliknięcia na mapę. Po wywołaniu funkcji z jednym, nazwanym argumentem zdarzenie sprawdzamy, czy przekazany obiekt posiada właściwość latLng (linia numer 3). Jeżeli tak jest, to możemy być pewni, że kliknięcie przechwycono prawidłowo, a we właściwości latLng znajdują się współrzędne geograficzne kliniętego punktu. Zastosowanie zdarzeń jest ograniczone wyobraźnią, w przykładzie powyżej wyświetlony jest dymek z wypisanymi współrzędnymi GPS. Sposób tworzenia dymków omówiono w poprzednim poradniku.

przykład 1pokaż kod przykładu

Przykład 2 - zdarzenie click na markerze

Nieco zmodyfikujemy poprzedni przykład, poprzez dodanie markerów i zdarzeń kliknięcia. Najlepiej wydzielić do tego zadania osobną funkcję w sposób następujący:

function dodajMarker(wspolrzedne)
{
	var marker = new google.maps.Marker({
		position: wspolrzedne,
		map: mapa
	});
	google.maps.event.addListener(marker,'click',function(zdarzenie)
	{
		dymek.setContent('<strong>Kliknąłeś na marker!</strong><br />Współrzędne GPS markera:<br />'+marker.getPosition());  
		dymek.setPosition(marker.getPosition());  
		dymek.open(mapa);
	});
}
			
dodajMarker(new google.maps.LatLng(53.4193540,14.5816040));
dodajMarker(new google.maps.LatLng(53.3174540,14.5926141));

W linii numer 7 zawarta jest definicja zdarzenia. Zauważ, że obiekt zdarzenie nie jest w ogóle wykorzystywany, ponieważ zdarzenie click na markerze nie przekazuje żadnych dodatkowych informacji. Wszelkie niezbędne parametry należy pobrać ręcznie, np. pozycję markera za pomocą metody getPosition().

przykład 2pokaż kod przykładu

Przykład 3 - zmiana zoomu

Jest to bardzo prosty przykład, którego działanie polega na wykryciu zmiany zoomu i wyświetleniu stosownego komunikatu. Pozornie nieprzydatny, okazuje się mieć duże znaczenie w praktyce - przykładowo, programista może wychwycić moment, w którym zmieniono zoom po to, by wyświetlić nowe markery, zmienić stan mapy, uaktualnić interfejs pozamapowy itp.

google.maps.event.addListener(mapa,'zoom_changed',function(zdarzenie)
{
alert('Zmieniono zoom mapy. Obecny poziom zbliżenia: '+mapa.getZoom());
});

Nienazwana funkcja jest wywoływana z pustym obiektem, bez żadnych właściwości. Po raz kolejny, wszelkie interesujące parametry powinny być wyzaczone ręcznie - w tym przypadku, znajdujemy zoom za pomocą metody getZoom() obiektu z mapą.

przykład 3pokaż kod przykładu

Zaawansowany przykład

Markery w Google Maps API v3

Poniższy przykład działa następująco: po kliknięciu na mapę, wstawiany jest w to miejsce marker z losową literką. Po kliknięciu na marker, jest on usuwany. Naraz może na mapie współistnieć wiele markerów, o ich liczbie informuje specjalny pasek ze statusem. Przykład korzysta z omówionych wcześniej mechanizmów, tak więc warto go przeanalizować w ramach powtórki zdarzeń i generowania własnych ikon:

przykład 4pokaż kod przykładu

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Polilinie

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Pierwsza mapa

API v3

Kurs podstaw cz. I: Witaj świecie, czyli jak wstawić mapę na stronę i zacząć programować


Dodawanie znaczników na mapę

API v3

Kurs podstaw cz. II: Podstawowe informacje na temat wstawiania markerów (znaczników)


Geokodowanie adresów

API v3

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)


Wyświetlanie informacji na mapie

API v3

Kurs podstaw cz. V: Dodawanie tekstu i obrazków w dymkach informacyjnych