4D e 4E: Geolocalizzazione con HTML5 e javascript
Lezione per le classi 4D e 4E SIA su: Geolocalizzazione con HTML5 e javascript
Google Maps è un servizio offerto da Google che ci permette di creare mappe da integrare in una pagina web e che 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.
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 type="text/javascript">
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>
<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 type="text/javascript">
function init() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMaps,getError);
}
else
{alert("Geolocalizzazione non supportata dal browser");}
}
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.
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 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;
}
}
Se invocata la funzione getError() visualizziamo il testo con il tipo di errore.
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");
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);
//definisco il marker con le relative opzioni
marker= new google.maps.Marker(
{position:punto,
map:map,
title:"Questa è la tua posizione"});
}
map = new google.maps.Map(map_div,options);
//definisco il marker con le relative opzioni
marker= new google.maps.Marker(
{position:punto,
map:map,
title:"Questa è la tua posizione"});
}
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:
<!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 type="text/javascript">
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>
Link originale dell'articolo:
http://www.edinweb.altervista.org/blog/2013/12/20/geolocalizzazione-html5-javascript/
Per individuare la localizzazione salvare questo script html in una pagina e salvarla su uno spazio Web:
http://www.edinweb.altervista.org/blog/2013/12/20/geolocalizzazione-html5-javascript/
Per individuare la localizzazione salvare questo script html in una pagina e salvarla su uno spazio Web:
| <!doctype html> | |
| <html> | |
| <head> | |
| <title> Geolocation: dove sono? </title> | |
| <script> | |
| var id_watch = null; | |
| inCasoDiSuccesso = function(position){ | |
| document.getElementById("posizione_corrente").insertAdjacentHTML('beforeend', | |
| "<li> Lat: " + position.coords.latitude + ", Lon: " + position.coords.longitude + "</li>" | |
| ); | |
| } | |
| sospendiLaRicezione = function(){ | |
| navigator.geolocation.clearWatch(id_watch); | |
| } | |
| window.onload = function(){ | |
| id_watch = navigator.geolocation.watchPosition(inCasoDiSuccesso); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>La tua posizione attuale</h1> | |
| <menu type="toolbar"> | |
| <button type="button" onclick="sospendiLaRicezione()"> | |
| sospendi la ricezione di dati geospaziali | |
| </button> | |
| </menu> | |
| <ul id="posizione_corrente"> | |
| </ul> | |
| </body> | |
| </html> |
Commenti
Posta un commento