Come geolocalizzare le nostre applicazioni con HTML5?

In questo articolo vedremo come utilizzare le API javascript per la geolocalizzazione messe a disposizione nativamente da HTML 5.
Grazie a queste API possiamo ricavare la posizione geografica del dispositivo ed implementare delle funzionalità molto interessanti.
Sebbene tutto questo funzioni anche sui browser dei nostri PC di casa, trovo che abbia pochissimo senso (bene che vada verrà restituita la posizione del provider), mentre per i dispositivi mobili dotati di GPS si aprono innumerevoli possibilità. Ad esempio, per la versione mobile di un sito, possiamo sostituire il classico “dove siamo” con un “portami a”, ovvero utilizzare le API Google Maps (delle quali ho scritto un articolo introduttivo) per tracciare il percorso a partire dalla posizione del dispositivo. Puoi verificare se la richiesta arriva da un dispositivo mobile utilizzando la classe mobileDetect. Ma iniziamo.

Warm up

Crea un nuovo file geolocalizzazione.html ed intestalo con il doctype HTML5

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<head>
 <meta charset="utf-8" />
 <title>Geolocalizzazione</title>
 <script type="text/javascript">
 // qui scriveremo il codice
 </script>
</head>

<body>

</body>
</html>

Verificare che il browser supporti la geolocalizzazione

Per verificare che il browser supporti questa caratteristica, é sufficiente verificare l’esistenza dell’oggetto geolocation, in questo modo:

if(navigator.geolocation)
{
     alert('Il tuo browser supporta la geolocalizzazione');
}
else
{
     alert('Il browser non supporta la geolocalizzazione');
}

Come rilevare la posizione

Per recuperare i dati sulla posizione del dispositivo, utilizzeremo il metodo getCurrentPosition() che passa tre argomenti:

  • Il nome della funzione da invocare in caso di successo
  • Il nome della funzione da invocare in caso di errori (facoltativo)
  • I parametri di configurazione (facoltativo)

L’utilizzo del metodo getCurrentPosition() farà scattare la richiesta di autorizzazione a rilevare la posizione.

Iniziamo a scrivere la funzione da eseguire in caso di successo che chiameremo get_position()

La funzione get_position()

function get_position(position)
{
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;
 // é possibile rilevare anche l’altezza
 // (position.coords.altitude)
}

A questo punto abbiamo le coordinate, proviamo a passarle a Google Maps tramite lo script che ho presentato in questo articolo (e che ovviamente non starò a spiegare)

Come prima cosa richiamiamo le API di Google Maps

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

In seguito inseriamo nel body un contenitore per la mappa

<div id="mappa"></div>

Ed infine diamo una dimensione a questo contenitore

     #mappa{
    width: 700px;
    height: 550px;
    }

Ed ora siamo pronti per implementare il metodo getCurrentPosition() che sostituiremo al alert che ci avvertiva che il browser supporta la geolocalizzazione.

Ecco come dovrebbe apparire la pagina geolocation.html ora, con la funzione get_position() completamente implementata.

<!DOCTYPE html>
<html dir="ltr" lang="it-IT">
<head>
 <meta charset="utf-8" />

 <title>Geolocalizzazione</title>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

    <style>
    #mappa{
    width: 700px;
    height: 550px;
    }
    </style>

 <script type="text/javascript">
 function get_position(position)
 {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;

     var miaPosizione = new google.maps.LatLng(latitude,longitude);

     var settings = {
    zoom: 15,
    center: miaPosizione,
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP};

     var map = new google.maps.Map(document.getElementById("mappa"), settings);

 marker = new google.maps.Marker({
 position: miaPosizione,
 map: map,
 title: "La tua posizione"
  });

 }

 if(navigator.geolocation)
 {

     navigator.geolocation.getCurrentPosition(get_position);
 }
 else
 {
     alert('Il browser non supporta la geolocalizzazione');
 }
 </script>

</head>

<body>
 <div id="mappa"></div>
</body>
</html>

A questo punto lo script funziona, lo puoi provare in questa pagina di esempio.
Una volta autorizzata la geolocalizzazione, dopo alcuni secondi apparirà la mappa. Se stai facendo la richiesta da un dispositivo mobile, sulla mappa verrà indicata la tua esatta posizione.

Passiamo ora agli argomenti facoltativi di getCurrentPosition()

Gestire gli errori

Crea una nuova funzione e chiamala get_error().
in questa funzione disponiamo di tre codici di errore pricipali (in forma numerica) e di una proprietà (message):

  • Codice 1: Restituito quando l’utente non ha autorizzato la geolocalizzazione
  • Codice 2: Quando non é stato possibile stabilire una posizione
  • Codice 3: Quando il timeout (che é configurabile, vedremo più avanti) é scaduto

Negli altri casi viene valorizzata la proprietà message (che andrebbe utilizzata solo in fase di debug)

quindi la nostra funzione per gli errori potrebbe essere così:

   function get_error(error)
 {
     if(error.code == 1)
     {
         alert("Non hai autorizzato la geolocalizzazione");
     }
     else if(error.code == 2)
     {
         alert("La posizione non disponibile");
     }
     else if(error.code == 3)
     {
         alert("il timeout é scaduto");
     }
     else
     {
         // debug
         alert("messaggio di errore: "+error.message);
     }
 }

Passiamo quindi il nome della nostra funzione come secondo argomento del metodo getCurrentPosition() in questo modo:

navigator.geolocation.getCurrentPosition(get_position,get_error);

Parametri di configurazione

Vediamo ora i  parametri di configurazione:

  • enableHighAccuracy: da impostare su true per abilitare il massimo livello di precisione
  • timeout: il tempo massimo della richiesta espresso in ms.
  • maximumAge: il tempo trascorso il quale sarà necessaria una nuova localizzazione

Completiamo dunque gli argomenti della funzione getCurrentPosition() ad esempio in questo modo:

navigator.geolocation.getCurrentPosition(get_position,get_error,{'enableHighAccuracy':true,'timeout':30000,'maximumAge':0});

Se vuoi approfondire ulteriormente, dai uno sguardo alla pagina delle specifiche ufficiali.

Conclusione

Come hai potuto vedere, rilevare la posizione di un dispositivo é poco più che un gioco da ragazzi. E pensare che fino a pochi anni fa era del tutto impensabile.
Nel nostro esempio abbiamo semplicemente indicato la posizione su di una mappa. Ma come detto, le API di Google Maps ci permettono anche di tracciare un percorso. Oppure, pensa di dover realizzare il sito dell’azienda dei trasporti pubblici della tua città. Inserendo in un database le coordinate di tutte le fermate, potresti implementare la funzione “portami alla fermata più vicina”. Possiamo veramente immaginare una lunga lista di servizi basati sulla geolocalizzazione in grado di valorizzare i nostri lavori e le potenzialità dei dispositivi mobili.
Tu hai già utilizzato queste funzionalità? Lo farai?

 

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

  • 12_05_social
    HTML Mobile App: perchè utilizzare l’MVC

    In un precedente articolo avevo parlato delle view e della loro importanza per quanto riguarda l’incremento delle prestazioni di rendering e della...

  • 28_04_social
    Guida HTML5: i form – parte 4

    Ed eccoci, finalmente, all’ultima parte della guida dedicata ai form! Nello scorso capitolo abbiamo introdotto nuovi tipi di input per gestire...

  • 23_04_social
    Guida HTML5: i form – parte 3

    Nei precedenti articoli di questa guida dedicati completamente ai form, abbiamo appreso, tra l’altro, come utilizzare i placeholder e le validazioni...

5 commenti

  1. Matteo

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *