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 wskazówek dojazdu

Ten artykuł dotyczy najnowszej wersji API

« 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ć?

Podstawy

Do stworzenia mapy, wyświetlającej wskazówki dojazdu będziemy korzystać z dwóch klas: DirectionsService oraz DirectionsRenderer, znajdujących się w przestrzeni google.maps.*:

// niezbędne elementy do wyznaczenia trasy:
var trasa  		 = new google.maps.DirectionsService();
var trasa_render = new google.maps.DirectionsRenderer();

Obiekt trasa będzie odpowiedzialny za znalezienie trasy dojazdu z punktu A do punktu B. Wynikiem jego działania jest pewna tablica w postaci przypominającej notację JSON. Można ją interpretować we własnym zakresie (tworząc polilinie i markery), ale na początek najlepiej jest skorzystać z gotowego obiektu renderującego, który wygeneruję listę wskazówek i objaśnienia graficzne za pomocą jednej linijki kodu. Do tego będzie wykorzystywany obiekt trasa_render.

Docelowy kontener dla opisu dojazdu oraz mapę do wstawienia markerów i polilinii określa się następująco:

mapa = new google.maps.Map(document.getElementById("mapka"), opcjeMapy); 			

// ustawienie docelowej mapy i kontenera na wskazówki
trasa_render.setMap(mapa);
trasa_render.setPanel(document.getElementById('wskazowki'));

Jeżeli pominiemy ustawienie mapy (setMap()) to wyrenderowany zostanie jedynie opis dojazdu. Jeśli pominiemy ustawianie panelu, to wyrenderowane zostaną jedynie polilinie i markery na mapie. Ponieważ póki co chcemy, by widoczne były obie rzeczy, odpowiednio dobieramy argumenty funkcji setMap i setPanel. Kontener na wskazówki to pewien div o id "wskazowki", może on wyglądać w kodzie tak:

<table style="border: 0 collapse;">
	<tr>
		<td style="width: 410px;">
			<div id='mapka' style='width: 400px; height: 350px; border: 1px solid black; background: gray;'></div>
		</td>
		<td style="width: 300px; border: 1px solid black;" valign="top">
		<div id="wskazowki">
		</div>
		</td>
	</tr>
</table>

Zadanie zapytania

Zapytanie o wskazówki odbywa się przy pomocy metody route obiektu klasy DirectionsService. Przyjmuje on jeden argument, w postaci następującego literału:

var dane_trasy = 
{
	origin: 'SKĄD',
	destination: 'DOKĄD',
	travelMode: google.maps.DirectionsTravelMode.DRIVING
};

Zamiast stałej DRIVING (sygnalizującej, że chodzi nam o dojazd samochodem) można wstawić inne, na przykład BICYCLING lub WALKING.

Napiszmy funkcję, która znajdzie dojazd ze Szczecina do Gdańska:

function znajdz_wskazowki()
{
	var dane_trasy = 
	{
		origin: 'Szczecin',
		destination: 'Gdańsk',
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	
	trasa.route(dane_trasy, obsluga_wskazowek);
}

Funkcja obsluga_wskazowek jest wywoływana z dwoma argumentami - pierwszy to zwrócone wyniki, natomiast drugi to status zapytania. Najpierw należy sprawdzić, czy zwrócono status OK a następnie nakazać obiektowi renderującemy wyrenderowanie listy wskazówek, markerów i polilinii na podstawie otrzymanych rezultatów (można to zrobić również we własnym zakresie, ale jest to nieco bardziej skomplikowane):

function obsluga_wskazowek(wynik, status)
{
	if(status != google.maps.DirectionsStatus.OK || !wynik.routes[0])
	{
		alert('Wystąpił błąd!');
		return;
	}
	
	trasa_render.setDirections(wynik);
}

W rezultacie otrzymamy schemat dojazdu i opis kroków: