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 Szczegóły wielu wyników geokodowania. 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:

http://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 = 'http://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. przykład 1pokaż kod przykładu

Uwagi

  • Pamiętaj, aby w adresie do statycznego obrazka podmienić klucz API na swój własny. W przeciwnym wypadku obrazek nie zostanie wygenerowany.
  • API map statycznych umożliwia wygenerowanie 1000 obrazków dziennie na jednego użytkownika (a nie na klucz). Z tego powodu w większości przypadków deweloperzy aplikacji nie muszą przejmować się tym limitem.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

Oto, co najczęściej czytają internauci, którzy przeczytali ten artykuł:

Geokodowanie adresów

API v2

Kurs podstaw cz. XI: Proste i szybkie geokodowanie adresów (zamiana adresu na współrzędne)


Wyznaczanie punktów z trasy przejazdu

API v2

Sposób na wyciągnięcie współrzędnych z polilinii (trasy dojazdu GDirections)


Znajdowanie trasy i wskazówek dojazdu

API v2

Prosty i elegancki sposób na znajdowanie i rysowanie trasy oraz wskazówek dojazdu pomiędzy punktami


Obsługa wielu wyników geokodowania

API v2

Bardziej zaawansowany przykład geokodowania, uwzględniający kilka pasujących rezultatów