Geolocalizzazione con HTML5 e Javascript. Integrazione con Google Maps
Pagina 1 di 3
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 });
