Geolocalizzazione con HTML5 e Javascript. Integrazione con Google Maps

Le novità in via d’introduzione con HTML5 sono tante ed alcune particolarmente interessanti. Tra queste ultime spicca, senza dubbio, il supporto per la geolocalizzazione la quale consente di individuare automaticamente la posizione geografica dell’utente attraverso il browser.

Mediante la geolocalizzazione, infatti, i browser con supporto per HTML5 sono in grado di risalire alla posizione dell’utente mediante l’indirizzo IP assegnato dal provider di connessione, dalla vicinanza alla cella di comunicazione (in caso di connessione mobile) oppure tramite l’antenna GPS eventualmente integrata nel dispositivo. Il rilevamento della posizione georafica, ovviamente, avviene solo a seguito di esplicito assenso del diretto interessato (che verrà avvisato della richiesta della pagina web di effettuare il tracciamento della posizione, richiesta alla quale potra acconsentire oppure no).

La posizione geografica restituita dal browser è espressa sotto forma di coordinate (latitudine e longitudine) che potranno poi essere utilizzate mediante Javascript. Le nuove API per la geolocalizzazione si basano su una nuova proprietà dell’oggetto navigator: navigator.geolocation.

Al fine di verificare se il browser offre supporto a queste nuove API di HTML5 è sufficiente, quindi, effettuare una chiamata condizionale di questo tipo:

if (navigator.geolocation) {
  // browser HTML5-ready con supporto per la geolocalizzazione
}else{
  // nessun supporto alla geolocalizzazione
}

Vediamo ora un semplice codice Javascript (da inserire nell’header della pagina) per il rilevamento delle coordinate geografiche dell’utente:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(mia_posizione);
}else{
  alert('La geo-localizzazione NON è possibile');
}

function mia_posizione(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  document.getElementById('posizione').innerHTML = 'La tua posizione: ' + lat + ',' + lon;  
}

Nel corpo della pagina no resta che inserire un elemento con id "posizione" al cui interno verranno scritte le coordinate dell’utente.

Per vedere un esempio funzionante clicca qui.

La funzione getCurrentPosition()

Come potete vedere qualora il browser supporti la geolocalizzazione vene richiamata la funzione getCurrentPosition() alla quale, nel nostro esempio, viene passato quale unico argomento il callback in caso di successo. In realtà questa funziona ammette tre parametri:

• callback in caso di successo;
• callback in caso di fallimento;
• opzioni:
  • enableHighAccuracy: può essere true o false; consiste nella richiesta al dispositivo di inviare la posizione con il massimo livello di accuratezza (attivamndo, ad esempio, il GPS del dispositivo);
  • timeout: durata massima dell’attesa per la rilevazione della posizione (in millisecondi);
  • maximumAge: età massima del rilevamento dopodichè dovrà essere effettuato un nuvo tracciamento della posizione;

Di seguito un esempio di utilizzo della funzione getCurrentPosition() con tutti e tre i parametri ammessi:

navigator.geolocation.getCurrentPosition(
  success_callback, error_callback, { enableHighAccuracy: false });

Un esempio pratico: geo-localizzazione e Google Maps

Vediamo di seguito come implementare queste nuove funzionalità di geolocalizzazione utilizzando un servizio di terze parti come Google Maps.

Quello che andremo a realizzare, in sostanza, è una funzione di callback da utilizzare ina caso di successo (tracciamento posizione riuscito) in cui le coordinate vengono passate a Google Maps (mediante le API di quest’ultimo) al fine di riprodurre sullo schermo la mappa del punto in cui l’utente si trova.

Di seguito il codice della nostra funzione mostra_mappa():

function mostra_mappa(posizione) {
  // identifico il punto in cui è stato individuato l'utente
  var punto = new google.maps.LatLng(posizione.coords.latitude, posizione.coords.longitude),
  // definisco una serie di opzioni          
  opzioni = {
    zoom: 15,
    center: punto,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  },
  // definisco l'elemento della pagina che ospiterà la mappa
  contenitore = document.getElementById("mia_mappa"),
  // creo la mappa
  mappa = new google.maps.Map(contenitore, opzioni),
  // imposto un marker
  marker = new google.maps.Marker({
    position: punto,
    map: mappa,
    title: "Tu sei qui!"
  });
}

Per poter funzionare correttamente, ovviamente, è necessario intestare il documento come HTML5:

<!DOCTYPE html>

E’ inoltre indispensabile inserire nell’header della pagina il codice Javascript di Google maps:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

e creare nel corpo del documento il DIV contenitore per la mappa.

Di seguito il codice completo pronto all’uso:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(mostra_mappa);
}else{
  alert('La geo-localizzazione NON è possibile');
}

function mostra_mappa(posizione) {
  // identifico il punto in cui è stato individuato l'utente
  var punto = new google.maps.LatLng(posizione.coords.latitude, posizione.coords.longitude),
  // definisco una serie di opzioni          
  opzioni = {
    zoom: 15,
    center: punto,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  },
  // definisco l'elemento della pagina che ospiterà la mappa
  contenitore = document.getElementById("mia_mappa"),
  // creo la mappa
  mappa = new google.maps.Map(contenitore, opzioni),
  // imposto un marker
  marker = new google.maps.Marker({
    position: punto,
    map: mappa,
    title: "Tu sei qui!"
  });
}
</script>
<style type="text/css">
div#mia_mappa {
  width: 500px;
  height: 300px;
  margin: 10px auto;
}
</style>
</head>

<body>
<div id="mia_mappa">Attendere prego...</div>
</body>
</html>

Per vedere un esempio funzionante clicca qui.