Poznaj Google Maps API

Geokodowanie adresów

« 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. GLatLng(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 jedynie w większych miastach geokodowanie odbywa się z dokładnością do numeru budynku.

Wykonanie zapytania

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

var geo = new GClientGeocoder();

Obiekt geo posiada metodę getLatLng(), której użyjemy do przetworzenia adresu na współrzędne. Musimy w tym celu podać dwa argumenty - pierwszy to string z adresem, który chcemy zgeokodować, a drugi to funkcja, która zostanie wykonana po wykonaniu operacji. Zostanie ona wywołana z jednym argumentem klasy GLatLng, lub z pustym argumentem jeśli adres nie został odnaleziony.

var adres = 'Szczecin, Krzywoustego 23';
geo.getLatLng(adres,function(punkt)
{
	if (!punkt)
	{
		// kod z tego miejsca zostanie wykonany, jeśli adres nie został odnaleziony
	}
	else
	{
		// jeśli adres znaleziono, to w tym miejscu stworzymy kod, który wyświetli punkt na mapie
	}
});

W linijce 9 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:

// centrujemy na znalezionym punkcie (lekcja nr 1)
mapa.setCenter(punkt, 15);

// dodajemy w tym miejscu marker (lekcja nr 2,3)
var ikona = new GIcon();
ikona.image='http://maps.google.com/mapfiles/kml/pal3/icon52.png';
ikona.shadow='';
ikona.iconSize=new GSize(32,32);
ikona.iconAnchor=new GPoint(16,16);
ikona.infoWindowAnchor=new GPoint(16,16);

var marker = new GMarker(punkt,{icon: ikona, title: adres});
mapa.addOverlay(marker);

// i otwieramy dymek z adresem (lekcja 5)
marker.openInfoWindowHtml('Poszukiwany adres
'+adres);

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)
{
	if(!geo) return;
	geo.getLatLng(adres,function(punkt)
	{
		if (!punkt)
		{
			// jeśli punkt nie istnieje, to adres nie został znaleziony
			alert(adres + " nie został znaleziony!");
		}
		else
		{
			// centrujemy na znalezionym punkcie
			mapa.panTo(punkt);
			
			// czyścimy markery z mapy
			mapa.clearOverlays();
			
			// dodajemy w tym miejscu marker
			var ikona = new GIcon(G_DEFAULT_ICON);
			ikona.image='http://maps.google.com/mapfiles/kml/pal3/icon52.png';
			ikona.shadow='';
			ikona.iconSize=new GSize(32,32);
			ikona.iconAnchor=new GPoint(16,16);
			ikona.infoWindowAnchor=new GPoint(16,16);
			
			var marker = new GMarker(punkt,{icon: ikona, title: adres});
			mapa.addOverlay(marker);
			
			// i otwieramy dymek z adresem
			marker.openInfoWindowHtml('Poszukiwany adres
'+adres);
		}
	});
}

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: 300px; 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

Uwagi

• Funkcja geokodująca zwraca co najwyżej jeden wynik. Jeśli do wyszukiwania wpiszesz Kurów, to prawdopodobieństwo, że API zwróci dokładnie tę miejscowość o którą Ci chodzi (w Polsce jest ponad 13 miejscowości o tej nazwie). Aby zapewnić wyświetlenie opcji wyboru w momencie, gdy do zapytania pasuje wiele wyników należy użyć innej metody pobierania wyników geokodowania, opisanej w rozdziale ZAAWANSOWANE

Przejdź do kolejnej części kursu

Tytuł następnej części kursu to Optymalizacja wyświetlania dużej ilości znaczników

• 1.Pierwsza mapa
• 2.Dodawanie znaczników na mapę
• 3.Zmiana domyślnej ikony znacznika
• 4.Popularne, darmowe ikony dla markerów
• 5.Wyświetlanie informacji na mapie
• 6.Wbudowane kontrolki i sterowanie
• 7.Zdarzenia
• 8.Polilinie
• 9.Obliczenia
• 10.Wczytywanie danych z pliku XML
• jesteś tu!Geokodowanie adresów
• 12.Optymalizacja wyświetlania dużej ilości znaczników
• 13.Debugowanie skryptów dla początkujących