Geolocalizzazione con HTML5 e javascript

Google Maps è un servizio offerto da Google che ci permette di creare mappe da integrare in una pagina web.

Le mappe possono essere personalizzate tracciando percorsi stradali, contrassegnare  le posizioni di specifici luoghi, visualizzare informazioni sui luoghi “markati” e molto altro.

In questo articolo, vediamo come utilizzare la Geolocation API con le API v.3 di Google Maps per individuare la posizione corrente di un dispositivo mobile e visualizzare la sua posizione su una mappa personalizzata.

Da tener conto che il rilevamento della posizione geografica, avviene dopo assenso da parte dell’utente che visualizzando un pop-up nel browser, può acconsentire oppure no alla richiesta.

geolocalizzazione

Come primo passo dobbiamo inserire un controllo nel codice per verificare se il browser utilizzato supporti la geolocalizzazione.

Utilizzando la proprietà geolocation dell’oggetto navigator verifichiamo se c’è il supporto da parte del browser:




<script>
if(navigator.geolocation)
{
alert("Geolocalizzazione  supportata dal browser");
}  else{alert("Geolocalizzazione non supportata dal browser");}
</script>

Creazione della mappa

Iniziamo nel definire l’area della pagina HTML nella quale visualizzare la mappa inserendo un contenitore “div” all’interno  di “<body></body>”:

<div id="my_map" ></div>

e nel foglio di style associato alla pagina, indichiamo le dimensioni del contenitore e la sua posizione:

div#my_map{ width:600px;
height:600px;
margin:0 auto}

Definiamo le tre funzioni “Javascript” che ci permettono prima di verificare se la geolocalizzazione è supportata e poi  in caso di risposta positiva, rilevare la posizione dell’utente e la visualizzazione della mappa:

<script>
function init() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMaps,getError);
}
else
{alert("Geolocalizzazione non supportata dal browser");}
}
</script>

Invochiamo la funzione init() al caricamento della pagina e se la geolocalizzazione è supportata dal browser, utilizzando il metodo getCurrentPosition() dell’oggetto navigator, rileviamo la posizione geografica dell’utente.

Come possiamo visualizzare dal codice questo metodo ha due parametri: Il primo è la funzione da invocare in caso di successo mentre la seconda in caso di errore.

<script>
function getError(error){

switch(error.code){
case 0:
document.getElementById("status").innerHTML = "Errore sconosciuto";
break;
case 1:
document.getElementById("status").innerHTML = "Richiesta rifiutata dall'utente";
break;
case 2:
document.getElementById("status").innerHTML = "La posizione non può essere determinata!";
break;
case 3:
document.getElementById("status").innerHTML = "Timeout Scaduto";
break;
}
}
</script>

Se invocata la funzione getError() visualizziamo il testo con il tipo di errore.

<script>
function showMaps(position)
{

// ricavo le coordinate
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

//punto della mappa della posizione del dispositivo
var punto = new google.maps.LatLng(latitude , longitude);
//definiamo le opzioni da assare alla mappa
options={
zoom: 10, //valore dello zoom
center: punto, //centriamo la mappa in base alle coordinate

/*indentifico il tipo di mappa, in questo caso la mappa stradale.*/
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map_div=document.getElementById("my_map");

//creo l'oggetto mappa
map = new google.maps.Map(map_div,options);
//definico il marker con le relative opzioni
marker= new google.maps.Marker(
{position:punto,
map:map,
title:"Questa è la tua posizione"});
}
</script>

showMaps è la funzione invocata in caso di successo che ci permetterà di visualizzare la mappa all’inteno del contenitore definito nel codice HTML e di visualizzare il segnaposto (marker) per rappresentare la locazione attuale dell’utente.

Possiamo quindi dare un’occhiata al codice completo della pagina:

Geolocalizzazione.html

<!DOCTYPE html >
<html>
<head>
<style>
#my_map{ width:600px;
height:600px;
margin:0 auto
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>

function init() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMaps,getError);
}
else
{alert("Geolocalizzazione non supportata dal browser");}
}

function getError(error){

switch(error.code){
case 0:
document.getElementById("status").innerHTML = "Errore sconosciuto";
break;
case 1:
document.getElementById("status").innerHTML = "Richiesta rifiutata dall'utente";
break;
case 2:
document.getElementById("status").innerHTML = "La posizione non può essere determinata!";
break;
case 3:
document.getElementById("status").innerHTML = "Timeout Scaduto";
break;
}
}

function showMaps(position)
{
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var punto = new google.maps.LatLng(latitude,longitude);

options={
zoom: 13,
center: punto,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
map_div=document.getElementById("my_map");
map = new google.maps.Map(map_div,options);

marker= new google.maps.Marker(
{position:punto,
map:map,
title:"Questa è la tua posizione"});
}

</script>

<head>
<body onload="init();">
<h1>Geolocalizzazione con HTML5</h1>

<p id="status"></p>

<h3>Visualizza la tua posizione sulla mappa</h3>
<div id="my_map"></div>

</body>
</html>

Lascia un commento