geolocalizzare gli utenti con le geolocation api

Come annunciato venerdì scorso, apro la settimana con un  nuovo spumeggiante tutorial che ti illustrerà come usare le Geolocation API, ideali per poter risalire alla posizione dell’utente, informazione molto utili per:

  • Ecommerce: i quali possono automaticamente inserire le spese di spedizione senza alcun intervento da parte dell’acquirente;
  • Meteo: personalizzare i widget per il meteo;
  • Offerte giornaliere: fornire all’utente solo offerte legate alla sua zona (provare l’illusione di una gustosa pizza a metà prezzo, poi scoprire che l’offerta era a Napoli, mi ha ferito profondamente).

Nei periodi precedenti all’introduzione delle Geolocation API, dovevamo dare all’utente l’incarico di selezionare la sua posizione, con queste nuove funzioni javascript, possiamo tranquillamente saltare questo passaggio e farlo fare direttamente al sistema.

Il tutorial di oggi ti aiuterà a capire come geolocalizzare l’utente su una mappa di Google Maps, quindi non ci resta che incominciare.

Geolocation API e HTML5

Prima di iniziare il tutorial vorrei sottolineare il fatto che per qualche arcano motivo le API per la geolocalizzazione, vengono inserite nel grande calderone HTML5, l’unica cosa che hanno in comune le due cose è il consorzio che ne gestisce la standardizzazione, cioè la W3C.

demo tutorial geolocation api

Creazione di una mappa con Google Maps

Per prima cosa dobbiamo creare la mappa, utilizzando le API di Google Maps, nel codice javascript qui di seguito, recupereremo la posizione, tramite le due variabili coords.latitude e coords.longitude, come avrai sicuramente già capito queste due variabili conterranno rispettivamente la latitudine e la longitudine.

Per creare una mappa usufruiremo delle istruzioni google.maps.Map e google.maps.Marker, come nel seguente esempio:

Se ti senti disorientato, puoi approfondire le API di Google Maps consultando la documentazione gentilmente fornita dal team di Google.

Intercettare gli errori

Nella possibile situazione in cui la posizione non sia disponibile, facciamo sapere all’utente che il servizio non è al momento disponibile con una bell’alert, proprio come lo script che segue

 Geolocalizzare l’utente

Infine eccoci arrivati finalmente alle Geolocation API, grazie alle quali possiamo geolocalizzare il nostro utente e offrirgli dei servizi personalizzati, in base alla sua posizione.

Come si può osservare dal codice che segue è davvero facilissimo implementare questa utilissima funzione:

Commento subito il codice così che sia più facile capirlo. Per prima cosa verifico se il browser supporta le Geolocation API, nel caso in cui non le supporti, il browser risponderà con alert, in modo da informare l’utente che il suo browser non può eseguire lo script perché molto probabilmente si tratta di una versione troppo vecchia.

Nel caso di riposta affermativa usiamo l’istruzione getCurrentPosition, grazie alla quale posso rilevare la posizione dell’utente, nel caso la geolocalizzazione va a buon fine, lo script manderà i dati alla funzione della mappa, altrimenti verrà mostrato l’alert contenuto nella funzione showError().

Revisione finale

Bene il tutorial si può dichiarare concluso, dai un’ultimo sguardo prima di salvare e provare il tuo nuovo script:

 La privacy dell’utente

Privacy utente su Google ChromePer quanto riguarda il discorso privacy, ogni browser chiede l’autorizzazione prima di geolocalizzare il dispositivo, basterà infatti cliccare “Consenti”, per fornire la propria posizione ed utilizzare la funzione collegata a quel genere di dato.

Accuratezza dei risultati

Non sempre i risultati sono precisi al 100%, questo perché ci sono diversi fattori che possono influenzare l’accuratezza della posizione finale, tra cui possiamo trovare:

  • Il dispositivo che stai utilizzando;
  • I dati forniti, possono cambiare da connessione mobile a connessione wifi.

demo tutorial geolocation api

Conclusioni

Dopo questo tutorial dovresti essere in grado di geolocalizzare l’utente che consente al trattamento di questi dati e di conseguenza puoi migliorare dei servizi all’interno del tuo sito.

Problemi o domande? Fammelo sapere in un commento qui sotto!