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.

Geokodowanie adresów

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy kategorii

Praktycznym udogodnieniem dla użytkowników API jest możliwość prostego geokodowania adresów. Geokodowanie polega na zamianie adresu z postaci czytelnej dla człowieka (np. Szczecin, Niepodłegości 20) na dane, dzięki którym komputer może wyświetlić go na mapie np. (53.42971083966362, 14.544181823730469).

W praktyce, geokodowanie polega na wysłaniu specjalnie przygotowanego zapytania do serwera Google, który je przetworzy i zwróci wynik, o ile daną lokalizację można zdekodować. W USA i krajach Europy Zachodniej geokodowanie jest szczegółowe do tego stopnia, że można precyzyjnie geokodować ulice i numer budynku. W Polsce dokładność geokodera w dużych miastach również pozwala na precyzyjne ustalenie położenia z dokładnością do numeru domu.

Wykonanie zapytania

Do obsługi zapytań należy stworzyć nowy obiekt klasy Geocoder():

var geokoder = new google.maps.Geocoder();

Obiekt geokoder posiada metodę geocode(), której użyjemy do przetworzenia adresu na współrzędne. Musimy w tym celu podać dwa argumenty - pierwszy to literał obiektu, zawierającego parametry poszukiwanego adresu. Drugi to funkcja, która zostanie wykonana po wykonaniu operacji, która zostanie wywołana z dwoma argumentami - tablicą wyników oraz statusem zapytania.

geokoder.geocode({address: 'Szczecin, Krzywoustego 23'}, obslugaGeokodowania);

function obslugaGeokodowania(wyniki, status)
{
	if(status == google.maps.GeocoderStatus.OK)
	{
		// tutaj instrukcje, jeśli geokodowanie się powiodło
	}
	else
	{
		// tutaj instrukcje, jeśli geokodowanie się nie powiodło
	}
}

W linijce 7 należy wstawić kod, którego budowa nie powinna być trudnością po zaznajomieniu się z wcześniejszymi lekcjami. Może on przykładowo wyglądać tak:

var rozmiar 			= new google.maps.Size(32,32);
var rozmiar_cien 		= new google.maps.Size(59,32);
var punkt_startowy		= new google.maps.Point(0,0);
var punkt_zaczepienia	= new google.maps.Point(16,16);

var ikona	= new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon52.png", rozmiar, punkt_startowy, punkt_zaczepienia);
var cien 	= new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal3/icon52s.png", rozmiar_cien, punkt_startowy, punkt_zaczepienia);

mapa.setCenter(wyniki[0].geometry.location);
var marker = new google.maps.Marker(
	{
		map: 		mapa, 
		position: 	wyniki[0].geometry.location,
		icon: 		ikona,
		shadow: 	cien
	}
);
dymek.open(mapa, marker);
dymek.setContent('<strong>Poszukiwany adres</strong><br />Szczecin, Krzywoustego 23');

Pełny kod dostępny w przykładzie 1: przykład 1pokaż kod przykładu

Zapewnienie interakcji z użytkownikiem

Nic nie stoi na przeszkodzie, by to użytkownik mógł wpisać adres, który następnie zostanie zdekodowany. Wymagana jest mała zmiana w kodzie - musimy napisać funkcję, obsługującą zapytanie oraz dodać formularz, przez który użytkownik będzie wpisywał adres. Przykładowo:

Funkcja geokodująca:

function skoczDoAdresu(adres)
{
	wskaznik.setMap(null); // ukrywamy marker
	geokoder.geocode({address: adres}, function(wyniki, status)
	{
		if(status == google.maps.GeocoderStatus.OK)
		{
			mapa.setCenter(wyniki[0].geometry.location);
			wskaznik.setPosition(wyniki[0].geometry.location);
			wskaznik.setMap(mapa); // pokazujemy go ponownie
			dymek.open(mapa, wskaznik); // dymek ze znalezionym adresem
			dymek.setContent('<strong>Poszukiwany adres</strong><br />'+adres);
		}
		else
		{
			alert("Nie znalazłem podanego adresu!");
		}
	});
}

I formularz:

<form id="geo" action="#" onsubmit="skoczDoAdresu(document.getElementById('szukanyAdres').value); return false;">
	<strong>Wpisz adres do geokodowania</strong>
	<br />
	<input type="text" style="width: 280px; border: 1px solid black; color: #898989; font-size: 1.1em; padding: 3px;" id="szukanyAdres" />
	<br/>
	<strong>... lub wybierz przykładowy z listy</strong><br />
	<select style="width: 300px; border: 1px solid black; color: #898989; font-size: 1.1em; padding: 3px;" onchange="document.getElementById('szukanyAdres').value=this.options[this.selectedIndex].value">
		<option selected="selected">wybierz z listy</option>
		<option value="Szczecin, Wojska Polskiego 53">Szczecin, Wojska Polskiego 53</option>
		<option value="Szczecin, Niepodległości 20">Szczecin, Niepodległości 20</option>
		<option value="Szczecin, plac Grunwaldzki">Szczecin, plac Grunwaldzki</option>
		<option value="Warszawa, Ujazdowskie 15">Warszawa, Ujazdowskie 15</option>
		<option value="Berlin, Prenzlauer Berg">Berlin, Prenzlauer Berg</option>
		<option value="Mierzyn (policki)">Mierzyn (policki)</option>
	</select>
	<br /><input type="submit" value="Pokaż na mapie" />
</form>

Zwróć uwagę na zdarzenie onsubmit formularza - w momencie wysyłki zostanie wywołana funkcja SkoczDoAdresu() z jednym argumentem - wartością pole tekstowego o id szukanyAdres. Analizę pola wyboru pozostawiam czytelnikowi. Pełny kod oraz jego efekt do obejrzenia w przykładzie 2: przykład 2pokaż kod przykładu

Przejdź do kolejnej części kursu

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)


Wyświetlanie informacji na mapie

API v3

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


Wczytywanie danych z pliku XML

API v3

Kurs podstaw cz. X: Omówienie wczytywania danych z pliku XML za pomocą AJAXa