Nello scorso appuntamento ti ho mostrato come, sfruttando le caratteristiche della geo-localizzazione dell'HTML5, è possibile identificare la posizione geografica - longitudine e latitudine - dell'utente collegato.
In questa seconda parte della guida andrai a collegare questi dati con la mappa di Google, attraverso le sue API v3. Abbiamo infatti ipotizzato una possibile applicazione reale di questo codice: nella pagina dei contatti del tuo sito l'utente potrà visualizzare il percorso per raggiungere l'indirizzo da te impostato partendo dalla sua posizione corrente.
Integrazione con la Google Map v3
Google con la versione v3 delle sue API per le mappe ha fatto un grande salto in avanti! Oltre ad aver eliminato la fastidioso Api Key che bisognava registrare per ogni sito che integrava la mappa, ha ottimizzato le funzioni javascript per utilizzare le mappe anche sui dispositivi mobile in modo molto più semplice.
Prima di entrare nel vivo del codice di questo tutorial soffermati sulle reference delle nuove API v3 per comprendere meglio il codice seguente.
Per integrare queste API devi includere nell'head della tua pagina il seguente riferimento:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=it"></script>
Imposta anche in una variabile globale l'indirizzo di destinazione che l'utente dovrà raggiungere:
var destinazione = "Piazza Duomo, 20122 Milano";
Funzione renderMap()
Questa funzione si occuperà di interagire con le API di Google per fare il render della mappa e delle indicazioni stradali. Vediamola passo passo.
Come prima cosa devi passargli come parametri di input le coordinate ottenute attraverso il metodo geolocation.getCurrentPosition() dell'HTML5:
function renderMap(lat, lng)
{
// GOOGLE MAP V3 CODE HERE
}
Andrai ad utilizzare il servizio DirectionsService() - che serve per elaborare il tragitto tra due o più punti passati nella rechiesta - e l'oggetto MVC DirectionsRenderer() che si occupa di fare il render del risultato fornito dal servizio:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
Se ricordi nel nostro codice HTML avevamo già predisposto due div per contenere la mappa (div id="map") e il testo con il tragitto (div id="panel"). Ora devi creare l'oggetto Map ed inizializzare il render directionsDisplay; in pratica devi dargli le indicazioni su cosa cercare e dove fare il render dei risultati. Assumiamo anche come valori di default uno zoom pari a 7 e un tragitto di tipo ROADMAP:
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("panel"));
Inizializza adesso come punto di partenza le coordinate dell'utente connesso:
var origine = new google.maps.LatLng(lat, lng);
e dichiara la variabile request (di tipo DirectionRequest) con i valori necessari per definire il tragitto:
var request = {
origin:origine,
destination:destinazione,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
Hai a disposizione ora tutti i dati che ti servono per fare il rendering, devi solo inviare la richiesta a Google attraverso il DirectionsService, in questo modo:
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
e richiamare la funzione renderMap() da handleGeoLocation() passando le coordinate:
function handleGeoLocation(position) {
// Estrai le coordinate dall'oggetto position
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Visualizza per questo test le coordinate estratte nel div "locationData"
var displayText = "La tua posizione corrente:
Latitudine: " + latitude + "
Longitudine: " + longitude;
document.getElementById("locationData").innerHTML = displayText;
// Crea mappa
renderMap(latitude, longitude);
}
Un pò di stile...
Prima di provare tutto ti consiglio di inserire un pò di CSS per formattare i contenuti della tua pagina, ad esempio in questo modo:
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial; font-size:12px; line-height:150%; text-align:center;}
#map { float:left; width:70%; height:95%; }
#panel { float:left; width:30%; height:95%; }
#panel table { font-size:10px; }
</style>
Conclusioni
Come hai potuto vedere bastano poche righe HTML e javascript per interagire con le nuove funzioni di geolocalizzazione dell'HTML5 e le API di Google Map v3. Adesso che hai capito come fare, partendo da questa puoi dare spazio alla tua creatività e realizzare diversi applicativi semplici e funzionali.
Questo è il codice completo dell'esempio realizzato (prima e seconda parte):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin:0; padding:0; width:100%; height:100%; }
body { background:#FFFFFF; color:#000000; font-family:Arial; font-size:12px; line-height:150%; text-align:center;}
#map { float:left; width:70%; height:95%; }
#panel { float:left; width:30%; height:95%; }
#panel table { font-size:10px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=it"></script>
<script>
var destinazione = "Piazza Duomo, 20122 Milano";
function getGeoLocation() {
// Controlla che l'oggetto geolocation sia supportato dal browser
if (navigator.geolocation)
navigator.geolocation.getCurrentPosition(handleGeoLocation, handleError);
else
document.getElementById("locationData").innerHTML = "Oh no... il tuo browser non supporta la geoLocation :'-(";
}
function handleGeoLocation(position) {
// Estrai le coordinate dall'oggetto position
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// Visualizza per questo test le coordinate estratte nel div "locationData"
var displayText = "La tua posizione corrente:<br/>Latitudine: " + latitude + "<br/>Longitudine: " + longitude;
document.getElementById("locationData").innerHTML = displayText;
// Crea mappa
renderMap(latitude, longitude);
}
function handleError(error) {
// Elemento HTML dove visualizzare il tipo di errore
var locationElement = document.getElementById("locationData");
// In base all'errore, visualizza il messaggio corrispondente all'utente
switch(error.code) {
case error.PERMISSION_DENIED:
locationElement.innerHTML = "Permesso negato";
break;
case error.POSITION_UNAVAILABLE:
locationElement.innerHTML = "Dati non disponibili";
break;
case error.TIMEOUT:
locationElement.innerHTML = "La richiesta è andata in timeout";
break;
case error.UNKNOWN_ERROR:
locationElement.innerHTML = "Errore sconosciuto";
break;
default:
locationElement.innerHTML = "Errore generico";
break;
}
}
function renderMap(lat, lng) {
// GOOGLE MAP v3 Code
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("panel"));
var origine = new google.maps.LatLng(lat, lng);
var request = {
origin:origine,
destination:destinazione,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body>
<input type="button" value="Definisci il percorso" onclick="getGeoLocation()"/>
<div id="locationData">
Le mie coordinate
</div>
<div id="map">
</div>
<div id="panel"></div>
</body>
</html>
Qui trovi la demo di quanto abbiamo realizzato: GetLocationHTML5-completo.html
Iscriviti ai feed RSS del blog per restare aggiornato sui prossimi tutorial ed articoli oppure seguimi su Twitter. Alla prossima!
Libri consigliati per migliorarsi su HTML5 e Google Map v3
7906ed51-1177-45bf-8dbe-277f196cf854|0|.0