Corsi on-line

Creare una semplice App per la geolocalizzazione

Creare una semplice applicazione per la geolocalizzazione e il posizionamento sfruttando le funzionalità messa a disposizione da Google Maps non è un’operazione particolarmente complessa, fortunatamente infatti il servizio di Mountain View ci mette a disposizione i metodi necessari per l’interrogazione della piattaforma; nello specifico in questo post proporremo i pochi passaggi richiesti per creare un’App utilizzabile da browser che sia in grado di restituire la nostra posizione corrente e le relative coordinate.

MapsCome prima operazione si dovrà definire una funzione JavaScript per la restituzione dell’output, quest’ultima non farà altro che verificare l’esito delle due funzioni successive, quelle deputate a rendere visibile la nostra posizione in una mappa di Google o a restituire una notifica in caso di errore; ciò avverrà utilizzando il metodo getCurrentPosition() dell’interfaccia navigator.geolocation il cui costrutto consente di implementare oggetti finalizzati a lanciare istanze per la localizzazione:

var m = document.getElementById("mappa");
function geoLocalizzami() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostraPosizione, mostraErrori);
} else {
m.innerHTML = "Il tuo browser non supporta la geolocalizzazione.";
}
}

Fatto questo, la funzione successiva si occuperà di svolgere due compiti: individuare le coordinate (latitudine e longitudine) della posizione corrente e, sulla base di esse, creare l’URL alla mappa corrispondente del servizio di Google. Di quest’ultima si potranno personalizzare le dimensioni e il livello di zoom, entrambe informazioni che potranno essere passare in querystring.

function mostraPosizione(position) {
var coordinate = position.coords.latitude + "," + position.coords.longitude;
var path_map = "http://maps.googleapis.com/maps/api/staticmap?center="
+coordinate+"&zoom=18&size=500x400&sensor=false";
document.getElementById("boxmappa").innerHTML = "<img src='"+path_map+"'>" + "<br />Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}

A questo punto l’applicazione vera e propria sarà già pronta e funzionante, ma per completezza verrà introdotta un’ulteriore funzione per la gestione degli errori:

function mostraErrori(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
m.innerHTML = "Permesso negato."
break;
case error.POSITION_UNAVAILABLE:
m.innerHTML = "Posizione non disponibile."
break;
case error.TIMEOUT:
x.innerHTML = "TimeOut."
break;
}

A questo punto non rimarrà che inserire il codice nel suo insieme in una pagine HTML, all’interno di essa sarà presente un pulsante in grado di richiamare la funzione geoLocalizzami() che permetterà di generare la mappa e stampare a video le coordinate corrispondenti alla posizione visualizzata; ecco il sorgente della pagina proposto per comodità del lettore:

<!DOCTYPE html>
<html>
<body>
<p id="mappa">Geolocalizzarsi con Google</p>
<button onclick="geoLocalizzami()">Dove mi trovo?</button>
<div id="boxmappa"></div>
<script>
var m = document.getElementById("mappa");
function geoLocalizzami() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostraPosizione, mostraErrori);
} else {
m.innerHTML = "Il tuo browser non supporta la geolocalizzazione.";
}
}
function mostraPosizione(position) {
var coordinate = position.coords.latitude + "," + position.coords.longitude;
var path_map = "http://maps.googleapis.com/maps/api/staticmap?center="
+coordinate+"&zoom=18&size=500x400&sensor=false";
document.getElementById("boxmappa").innerHTML = "<img src='"+path_map+"'>" + "<br />Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}
function mostraErrori(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
m.innerHTML = "Permesso negato."
break;
case error.POSITION_UNAVAILABLE:
m.innerHTML = "Posizione non disponibile."
break;
case error.TIMEOUT:
x.innerHTML = "TimeOut."
break;
}
}
</script>
</body>
</html>

Alcuni browser, come per esempio Mozilla Firefox, richiedono che l’utente permetta di essere geolocalizzato, tale consenso è necessario per questioni inerenti la tutela della privacy e non potrà essere evitato.

Post correlati
I più letti del mese
Tematiche