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.

Znajdowanie trasy i wskazówek dojazdu

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

Jedną z ciekawszych (lecz rzadziej używanych w polskich serwisach) funkcji jest możliwość wyświetlania dojazdu z punktu A do punktu B, w postaci narysowanej trasy oraz listy wskazówek dojazdu. Funkcja ta działa z bardzo dobrym efektem na terytorium Polski, a że dodatkowo zwracane są rezultaty w języku polskim, to dlaczego by jej nie spróbować?

GDirections

Do znajdowania dojazdu pomiędzy punktami potrzebny jest jeden obiek klasy GDirections. Raz utworzony, będzie odpowiadał za parsowanie i zwracanie rezultatów wszystkich następnych zapytań. By mieć do niego zawsze dostęp, najlepiej uczynić go obiektem globalnym.

Dwa argumenty, jakie możesz podać przy tworzeniu obiektu to kolejno:

  • odwołanie do mapy GMap2 (dzięki czemu program będzie wiedział, gdzie ma narysować trasę przejazdu)
  • odwołanie do obiektu w strukturze DOM, do którego zostaną wstawione wskazówki dojazdu

W przykładzie 1 w następujący sposób stworzyłem mapę oraz obiekt GDirections:

var mapa = new GMap2(document.getElementById('mapka'));
mapa.addControl(new GLargeMapControl());
mapa.setCenter(new GLatLng(52.40241887397331,17.9736328125),6,G_HYBRID_MAP);
var dojazd = new GDirections(mapa, document.getElementById("wskazowki"));

Wskazówki dojazdu zostaną załadowane do obiektu HTML o id "wskazówki". Aby zadać zapytanie, należy użyć metody load obiektu dojazd. Jako argument konieczne jest przekazane stringa w postaci from:ABC to:XYZ, gdzie ABC to adres początku trasy, a XYZ to adres punktu końcowego. Dzięki wstawieniu do przykładu 1 kodu:

dojazd.load('from:Szczecin, Wojska Polskiego 54 to:Poznań, Mickiewicza 20');

program załaduje trasę i wskazówki dojazdu i wyświetli je na starcie. A oto efekt: przykład 1pokaż kod przykładu

Uwaga

Za pomocą odpowiedniego kodu CSS dodałem suwak do wskazówek, który jest wyświetlany gdy te nie mieszczą się w całości w polu.

Znajdowanie dojazdu między adresami, podanymi przez użytkownika

W celu umożliwienia znajdowania dojazdu przez użytkownika, musimy przede wszystkim dodać odpowiedni formularz. Dla przykładu:

<form id="formularz" onsubmit="znajdzDojazd(); return false;">
<p><input class="tekst" type="text" value="Szczecin, Wojska Polskiego 54" id="adres1" /> skąd<br />
<input class="tekst" type="text" value="Poznań, Mickiewicza 20" id="adres2" /> dokąd<br />
<input type="submit" value="ZNAJDŹ DOJAZD" /></p>
</form>
<div id="wskazowki"></div>

Po wciśnięciu na przycisk submit zostanie zrealizowana akcja, zapisana w atrybucie onsubmit - wywołamy funkcję znajdzDojazd():

function znajdzDojazd()
{
	
	var adres1 = document.getElementById('adres1').value;
	var adres2 = document.getElementById('adres2').value;
	dojazd.load('from:'+adres1+' to:'+adres2);
}

Taka konstrukcja wymaga, by obiekt dojazd był globalny, tak więc zmienną dojazd należy wcześniej zadeklarować.

Ponieważ nie jesteśmy w stanie przewidzieć, jakie adresy wpisze użytkownik, warto dodać prostą obsługę błędów. Przyda się to w sytuacji, jeśli np. jeden ze znalezionych adresów nie istnieje, lub wystąpił inny problem. Przy określaniu rodzaju błędu, pomocny będzie jego kod, który pobrać można następująco:

dojazd.getStatus().code

Najlepiej napisać specjalną funkcję, zwracającą opis błędu na podstawie jego kodu:

function tekstBledu(blad)
{
	switch(blad)
	{
		case G_GEO_MISSING_QUERY:
		case G_GEO_MISSING_ADDRESS: var tekst = 'Nie podano adresu!'; break;
		case G_GEO_UNAVAILABLE_ADDRESS:
		case G_GEO_BAD_REQUEST:
		case G_GEO_SERVER_ERROR:
		case G_GEO_UNKNOWN_ADDRESS: var tekst = 'Nie udało się geokodować adresu'; break;
		case G_GEO_TOO_MANY_QUERIES: var tekst = 'Przekroczono limit zapytań do strony Google'; break;
		default: var tekst = 'Nie udało się znaleźć przejazdu pomiędzy podanymi punktami';
	}
	return tekst;
}

i wywoływać ją, przekazując w pierwszym argumencie kod błędu. Obsługa błędów to teraz kilka linijek, które należy wstawić za inijalizacją obiektu dojazd:

GEvent.addListener(dojazd, "error", function()
{
	var blad = tekstBledu(dojazd.getStatus().code);
	alert('Bład '+dojazd.getStatus().code+': '+blad);
});

Po wystąpieniu zdarzenia error pobierzemy odpowiedni kod i tekst błędu, a następnie wyświetlimy go w postaci alerta.

Bo wprowadzeniu takich modyfikacji do przykładu 1, uzyskujemy aplikację, dzięki której użytkownik sam może zdefiniować adresy punktu startowego i końcowego (przykład 2): przykład 2pokaż kod przykładu

Użycie myszy

Wpisywanie adresów nie jest do końca wygodne n.p. dla klienta, który chce szybko dowiedzieć się, jak dojechać do siedziby firmy. Wygodnym rozwiązaniem może okazać się udostępnienie mapy, w której - po kliknięciu na punkt startowy - wyznaczona zostanie trasa do ściśle określonego punktu docelowego. Taki problem rozwiązany został w przykładzie 3. Jako punkt startowy/docelowy można podać współrzędne geograficzne oddzielone przecinkiem. W ten sposób po przechwyceniu kliknięcia można zbudować adres wyglądający tak:

from:Punkt wybrany przez użytkownika@52.411896157734304,16.910533905029297 to:Poznań, Mickiewicza 20

Prefix (przed znakiem @) potrzebny jest po to, by API wyświetliło nazwę punktu początkowego jako "Punkt wybrany przez użytkownika". przykład 3pokaż kod przykładu

Wiele celów dojazdu

W kolejnym przykładzie wstawiłem formularz, w którym można wybrać docelowy punkt (trzy siedziby firmy w różnych miastach), a punkt początkowy można określić albo poprzez kliknięcie na mapie, albo też wpisanie adresu w odpowiednie pole. przykład 4pokaż kod przykładu

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Geokodowanie adresów

API v2

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


Wyznaczanie punktów z trasy przejazdu

API v2

Sposób na wyciągnięcie współrzędnych z polilinii (trasy dojazdu GDirections)


Obsługa wielu wyników geokodowania

API v2

Bardziej zaawansowany przykład geokodowania, uwzględniający kilka pasujących rezultatów


Wyświetlanie adresu klikniętego punktu

API v2

Dzięki temu poradnikowi dowiesz się, jak wyświetlić dane adresowe klikniętego punktu na mapie