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 z podglądem na miniaturze

Ten artykuł dotyczy API w wersji 2

« powrót do listy poradników

W tym poradniku napiszemy aplikację, która będzie geokodowała adres, podany przez użytkownika, a także wyświetlała podgląd docelowego miejsca. Przykładowo, po wpisaniu nazwy miejscowości "Będargowo" powinna zostać wyświetlona lista:

Geokodowanie z miniaturką

Do wykonania takiej aplikacji posłużę się przeróbką przykładu 1 z działu . Potrzebny będzie również dostęp do Google Maps Static API.

Dodanie miniaturki

Miniaturka będzie statycznym obrazkiem, generowanym przez serwer Google. Adres dostępu do miniatury może wyglądać następująco:

https://maps.google.com/staticmap?center=54.42749,18.126375&markers=54.42749,18.126375,red&size=120x80&zoom=11&sensor=false&key=ABQIAAAAskA3kyDm631CGf6Rw_GrbBRBRXpdM9jp6G1MF9yLMfWuIYZt2BR5Ltrn1m4MP2hliyyWcC1AqLxZ3A

Oczywiście, w aplikacji będziemy odpowiednio manipulować współrzędnymi środka i markera tak, by stworzyć interesującą nas miniaturkę.

Uwaga! Od marca 2009, obowiązkowe dołączenie jest parametru &sensor=true lub &sensor=false. Z pierwszego należy skorzystać, gdy tworzona przez nas aplikacja ma umożliwiać geolokalizację na podstawie sygnału GPS. W pozostałych przypadkach należy ustawić wartość parametru na false. Ponieważ żaden z przykładów na stronie nie jest przeznaczony na urządzenia przenośne i nie wykorzystuje tym samym możliwości określenia pozycji za pomocą sygnału GPS, wszystkie posiadają wartość parametru sensor ustawioną na false.

Należy nieco zmienić kod, odpowiedzialny za generowanie kodu pojedynczego trafienia. Obrazek statyczny będziemy wyświetlać jako tło wypunktowania, któremu nadamy również odpowiedni wewnętrzny margines w CSS:

.wyniki
{
	margin: 0;
	padding: 0;
}

.wyniki li
{
	list-style: none;
	padding: 2px;
	border-bottom: 1px dotted #ddd;
	background-position: 2px 50%;
	background-repeat: no-repeat;
	padding-left: 130px;
	height: 84px;
}

Generowanie kodu wypunktowania wygląda teraz tak:

var punkt = wyniki.Placemark[j].Point.coordinates;

html += '<li style="background-image: url('+adresStatyczny(new GLatLng(parseFloat(punkt[1]),parseFloat(punkt[0])))+');">';
html += '<a href="#" onclick="mapa.addOverlay(new GMarker(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+'))); mapa.setCenter(new GLatLng('+parseFloat(punkt[1])+','+parseFloat(punkt[0])+'),15);  return false;">';
	
/* ... */

html += wyniki.Placemark[j].AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
html += ', </a><span><br />pow. ';
html += wyniki.Placemark[j].AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.SubAdministrativeAreaName;
html += ', <br />woj. ';
html += wyniki.Placemark[j].AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
html += '</span>';
html += '</li>';

Funkcja adresStatyczny() generuje adres URL do miniaturki z podglądem. Jej działanie wyjaśnia poniższy kod:

function adresStatyczny(punkt)
{
	var pkt = punkt.lat()+','+punkt.lng();
	var url = 'https://maps.google.com/staticmap?center='+pkt+'&markers='+pkt+',red&size=120x80&zoom=11&key=';
	return url;
}

I to w zasadzie wszystko, jeśli chodzi o główną ideę wyświetlania miniaturek. W przykładzie 8.1 dodatkowo zaimplementowana została opcja ukrywania wyników po kliknięciu na specjalny link, a same wyniki prezentują się znacznie ładniej dzięki odrobinie kodu CSS.