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