Poznaj Google Maps API

Znajdowanie wskazówek dojazdu

« powrót do listy kategorii

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: przykład 1pokaż kod przykładu

UWAGA! W przykładach w tym poradniku do adresu skryptu z API dodano parametr &language=pl. Bez niego, niektóre przeglądarki nie potrafią rozpoznać poprawnie języka używanego w systemie i generują wyniki w języku angielskim.

Zapewnienie interakcji przez formularz

W kolejnym przykładzie zrobimy formularz, w którym będzie można samemu wpisać początek i koniec trasy. Zaczniemy od zbudowania struktury w HTML:

<form name="wskazowki" action="#" onsubmit="znajdz_wskazowki(); return false;" />
	<input type="text" name="skad" size="40" id="skad" value="Szczecin, ul. Zawadzkiego 10" /> skąd<br />
	<input type="text" name="dokad" size="40" id="dokad" value="Szczecin, ul. Potulicka 3" /> doąd<br />
	<br />
	<input type="submit" value="ZNAJDŹ TRASĘ DOJAZDU" />
</form>

Po kliknięciu na przycisk ZNAJDŹ wywołana będzie funkcja znajdz_wskazowki(), która powinna wyglądać następująco:

function znajdz_wskazowki()
{
	var dane_trasy = 
	{
		origin: document.getElementById('skad').value,
		destination: document.getElementById('dokad').value,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};
	
	trasa.route(dane_trasy, obsluga_wskazowek);
}

Reszta rzeczy jest niezmienna w stosunku do poprzedniego przykładu. Efekt: przykład 2pokaż kod przykładu

Zmiana własności wizualnych

Przy renderowaniu wyników można zmienić kilka przydatnych własności, na przykład:

Przykład:

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

// różne opcje renderowania
var opcje_renderowania =
{
	map: 				mapa,
	panel: 				document.getElementById('wskazowki'),
	polylineOptions:
						{
							strokeColor: 	'#ff0000',
							strokeWeight:	5,
							strokeOpacity:	0.8
						},
	suppressMarkers:	true
};

trasa_render.setOptions(opcje_renderowania);

Efektem będzie wyrenderowanie wskazówek dojazdu, polilinii w kolorze czerwonym, o grubości linii 5px, przezroczystości 20%, bez markerów: przykład 3pokaż kod przykładu