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.

Wyświetlanie lokalizacji użytkownika

Ten artykuł dotyczy najnowszej wersji API

« powrót do listy poradników

W tej części kursu zaprezentowany zostanie sposób na wyznaczenie, z którego miejsca użytkownik łączy się z internetem. Do wykonania takiego zadania można wykorzystać natywnie wspierane API geolokalizacji (wspierane przez wszystkie nowe przeglądarki) lub z API firm trzecich.

Sposób natywny

Używając funkcji navigator.geolocation.getCurrentPosition można wysłać zapytanie do przeglądarki o obecną lokalizację. Zazwyczaj użytkownik zostanie poproszony o potwierdzenie, czy zezwala stronie na poznanie lokalizacji geograficznej. Ze względu na to, że funkcja może nie zwrócić natychmiastowych wartości, operuje ona na dwóch funkcjach zwrotnych (callback) - jedna dla sytuacji, kiedy lokalizację udało się pozyskać, jedna dla sytuacji, kiedy lokalizacji nie udało się pozyskać.

navigator.geolocation.getCurrentPosition(function(pozycja)
{
	var punkt = new google.maps.LatLng(pozycja.coords.latitude,pozycja.coords.longitude);
	mapa.setCenter(punkt);
	dymek.setPosition(punkt);
	dymek.setContent('Oto twoja pozycja');
	dymek.open(mapa);
}, 
function() 
{
	alert('Nie udało się określić Twojej lokalizacji');
});

Pierwszy argument to funkcja odpowiadająca za pomyślne pozyskanie danych. Otrzymuje ona jeden argument - pozycję geograficzną. Nie jest ona tożsama z obiektem LatLng używanym w API Google Maps, dlatego też taki punkt geograficzny musimy stworzyć sami, pobierając współrzędne ze zwróconego obiektu (latitude oraz longitude). Potem wystarczy już tylko wyświetlić wynik na mapie. Jeśli zapytanie się nie powiedzie, to wykonana zostanie druga funkcja - w tym wypadku wyświetlimy na ekranie stosowny komunikat.

przykład 1pokaż kod przykładu

Zalety Wady
  • Wspierane przez większość przeglądarek, tak mobilnych jak i desktopowych
  • Bardzo duża dokładność (nawet do kilkunastu metrów)
  • Brak zależności, łatwa implementacja
  • W większości przypadków, użytkownik musi zezwolić na wykrycie lokalizacji (zobacz obrazek poniżej)

Użytkownik musi zezwolić na użycie tej funkcjonalności. Tak robi to Firefox (góra) i Internet Explorer (dół)

Monit o wykrycie lokalizacji

Ustawienie lokalizacji od razu na starcie

Oczywiście, można również wycentrować mapę już przy załadowaniu, wówczas będzie to wyglądało prościej, tak jak w przykładzie 2: przykład 2pokaż kod przykładu

Uwaga: dla pewności dodałem niewielki timeout przy otwieraniu dymka.

Rozwiązania firm trzecich

Co jednak w przypadku, gdy API do lokalizacji jest niedostępne, lub użytkownik ma zablokowaną tą funkcjonalność (ochrona prywatności itp)? W takim przypadku, możemy skorzystać również z API firm trzecich, które działają na nieco innej zasadzie - mając statyczną bazę adresów IP i przypisanych im współrzędnych geograficznych, próbują zwrócić użytkownikowi współrzędne na podstawie adresu IP. Rezultat jest zazwyczaj dużo gorszy niż w przypadku standardowego API do geolokalizacji, w moim przypadku różnica między tymi dwoma to 40km, na niekorzyść API zewnętrznego.

W tym przykładzie, posłużę się biblioteką firmy MaxMind.

GeoIP API firmy MaxMind

API jest dostępne za darmo, lecz wymagane jest umieszczenie w stronie linka zwrotnego do strony maxmind.com. W kodzie strony należy dołączyć skrypt JavaScript o następującym adresie URL:

<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>

Teraz do naszej dyspozycji będą następujące funkcje:

  • geoip_latitude() - zwraca szerokość geograficzną
  • geoip_longitude() - zwraca długość geograficzną
  • geoip_country_name() - zwraca nazwę kraju
  • geoip_country_name() - zwraca nazwę miasta

Aby pokazać, jak można w praktycę wykorzystać tą funkcjonalność, rozwinąłem przykład 3 o wsparcie dla sytuacji, kiedy standardowe API nie jest dostępne. Zamiast pokazywać wiadomość z błędem, możemy skorzystać przecież z mniej dokładnego, ale przynajmniej działającego rozwiązania.

Funkcja do geolokalizacji może wyglądać tak:

function znajdzMnieGeoIp()
{
	var lat = geoip_latitude();
	var lng = geoip_longitude();
	
	var punkt = new google.maps.LatLng(lat,lng);
	mapa.setCenter(punkt);
	dymek.setPosition(punkt);
	dymek.setContent('<div style="width: 200px;">Pozycja przybliżona (dane od MaxMind)</div>');
	dymek.open(mapa);
}

a zmodyfikowana funkcja do przeprowadzenia geolokalizacji:

function znajdzMnie()
{
	// Sprawdzamy czy Geolocation API jest dostepne
	if(navigator.geolocation) 
	{
		navigator.geolocation.getCurrentPosition(function(pozycja)
		{
			setTimeout(
				function()
				{
					var punkt = new google.maps.LatLng(pozycja.coords.latitude,pozycja.coords.longitude);
					mapa.setCenter(punkt);
					dymek.setPosition(punkt);
					dymek.setContent('Oto twoja pozycja');
					dymek.open(mapa);
				}, 
				250);
		}, 
		function() 
		{
			znajdzMnieGeoIp();
		});
	}
	// API nie jest wspierane...
	else 
	{
		znajdzMnieGeoIp();
	}
}	

Demonstracja działania dostępna jest w przykładzie o numerze 3: przykład 3pokaż kod przykładu

Przykład 126 będzie działał na każdej przeglądarce, nawet gdy API nie jest wspierane lub użytkownik zablokował możliwość jego użycia (kosztem mniej dokładnych wyników)

Zalety Wady
  • Działa niezależnie od ustawień prywatności i wsparcia dla API lokalizacji
  • Zazwyczaj dużo gorsza dokładność zwracanych współrzędnych
  • Konieczność użycia dodatkowej biblioteki
  • Konieczność wstawienia linku zwrotnego

Uwagi

  • Pamiętaj o dołączeniu linka zwrotnego do strony maxmind.com. Jest to wymóg w zamian za darmowy dostęp do API.
  • W Polsce dane uzyskane z wywołania skryptu odpowiadają rzeczywistości w ok. 70% - poprzez odpowiadanie rzeczywistości rozumie się dopasowanie geolokalizacji do rzeczywistego położenia z błędem nieprzekraczającym kilkunastu mil. Z tego powodu odpada lokalizowanie konkretnego budynku czy ulicy, lecz nadal można z łatwością np. pokazywać inny obszar startowy, ładować punkty znajdujące się bliżej potencjalnego obszaru zainteresowania osoby przeglądającej stronę itp. itd.

Polecane artykuły

Dodaj stronę do ulubionego serwisu społecznościowego

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

Pogoda na mapie

API v3

Jak wyświetlić stan pogody przy użyciu Google Maps API?


Nowy tryb mapy z openstreetmap.org

API v3

Prosty sposób na dodanie nowego trybu widoku ulic z openstreetmap.org