Geokodowanie adresów

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("https://maps.google.com/mapfiles/kml/pal3/icon52.png", rozmiar, punkt_startowy, punkt_zaczepienia); var cien = new google.maps.MarkerImage("https://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