Znowuż strudzony codziennością i poirytowany brakiem czasu próbuję stworzyć wrażenie, że nie zaniedbuję czytelników. Spodziewam się, że tylko ciekawy artykuł może temu zaradzić. Zatem zapraszam do lektury. W niej geolokalizacja po IP i temat map.

Google Maps – czy jest jakiś czytelnik, który nie spotkał się z tą aplikacją Google? Domyślam się, że nie (śmiałe przekonanie). Jednak, jeśli chodzi o wykorzystywanie API w zewnętrznych aplikacjach, to ten procent czytelników maleje.

Z kolei, jeśli chodzi o geolokalizację, to z pomocą przychodzi z pomocą FreeGeoIP. Jest to rozwiązanie darmowe, jedno z nielicznych. Jeśli potrzebujemy dokładniejszych danych geolokalizacyjnych możemy skorzystać opcji płatnych, jakie dają m.in.: IPLigence, IPAddressLabs, IPInfoDB.

Wspomniałem o powyższych aplikacjach w konkretnym celu. Jest to połączenie obu funkcjonalności. Sprowadza się to do trzech kroków:

1. Odczyt lub pobranie wybranego przez nas IP.
2. Zlokalizowanie IP.
3. Wyświetlenie miejsca na mapie na podstawie lokalizacji.

 

Istnieje również darmowe API geolokalizacyjne w postaci GeoPluginu (http://www.geoplugin.com/webservices/php), ale dane zwracane przez webserwis są niesatysfakcjonujące – współrzędne są liczbami całkowitymi.

Ale do rzeczy. W ramach wpisu stworzymy prostą stronę (PHP), gdzie wykorzystamy API Google Maps i API FreeGeoIP.

Google Maps

Jak to bywa z Google, wszelkie API jest bardzo dobrze udokumentowane, opisane itd. Nie warto zatem rozpisywać się na temat szczegółów działania. Podam link do tutoriala.

Niektórzy korzystający do tej pory sukcesywnie z Google Maps mogą w nim napotkać nowe rzeczy. Przedstawiona w tutorialu i opisywana aplikacja jest w wersji 3. Może się zdarzyć, że część Waszych lub posiadanych przez Was stron zawiera skrypty z wersji 2 API. To nic komplikującego. W sposób jasny zostały udokumentowane i omówione zmiany (różnice) pomiędzy obiema wersjami – link.

Skrypty wykorzystywane w przykładzie

<script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaAIzaAIzaAIzaAIzaAIzaAIzaAIzaAIzaAIz&sensor=true&language=pl" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

W nagłówku strony dołączmy skrypty niezbędne do dalszego działania. Skrypt API map zawiera 4 parametry. Pierwszy odpowiada za wersję API (2/3), drugi to klucz (tzw. secret key) – otrzymujemy go od Google w konsoli projektów. W tejże konsoli mamy również możliwość (konieczność) włączania określonych API udostępnianych przez Google. Kolejny parametr to czujnik GPS, dalej – język.

I tylko tyle tytułem wstępu do Google Maps – prawda, że prosto i intuicyjnie?!

Skrypt jQuery to już dodatek, ale bardzo ułatwiający pracę i dlatego uznaję, go z zasady za niezbędny.

FreeGeoIP

Tutaj będzie krótko. Ojj bardzo krótko, bowiem wszystko do czego sprowadza się praca z API to ściągnięcie odpowiedzi powiązanej z zapytaniem o dane dotyczące konkretnego IP.

Funkcja pobierania danych

function localization(ip) {
	$.get('https://freegeoip.net/json/'+ip, {}, function(data, textStatus, jqXHR) {
		load(data.latitude, data.longitude)
	});
}

Pobieramy Ajax’em dane powiązane z IP przekazywanym w parametrze funkcji. Dane otrzymujemy w formacie JSON, przez co łatwo dobrać się do interesujących nas współrzędnych. Współrzędne przekazujemy do funkcji load().

Funkcja łącząca API

Wspomniana wcześniej funkcja load() konieczna jest do połączenia zadania obu API. W niej „generowana” jest mapa na podstawie danych geolokalizacyjnych. Prawda, że łatwo?

function load(latitude, longitude) {
   var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(latitude, longitude),
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   });
}

Jeśli coś jest nieintuicyjne odsyłam do tutoriala Google Maps.

Aby umożliwić wyświetlanie mapy zaraz po załadowaniu strony (HTML), wystarczy podpiąć pod okno przeglądarki zdarzenie load z wywołanie funkcji localization(XX.Y.Z.A). Jeśli wykorzystamy interpreter PHP do generowania kodu HTML możemy w łatwy sposób wstrzyknąć IP żądania do funkcji JS.

Źródło

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <script src="http://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCg2uUoBp732YAu1JH24hdSWoD60ysRKaA&sensor=true&language=pl" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

  <script type="text/javascript">
	function localization(ip) {
		$.get('https://freegeoip.net/json/'+ip, {}, function(data, textStatus, jqXHR) {
			load(data.latitude, data.longitude)
		});
	}
    function load(latitude, longitude) {
        var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(latitude, longitude),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
		});
    }
	google.maps.event.addDomListener(window, 'load', localization('62.20.1.11'));
  </script>
 </head>
 <body>
   <div id="map" style="width: 500px; height: 300px"></div>
 </body>
</html>