Formazione continua

Come realizzare un percorso su mappa con HTML5 e Google Map v3 (1/2)

febbraio 16, 2012 by Giuseppe Maldarizzi | 0 Commenti

Tra le tante novità dello standard HTML5, quella che puoi maggiormente sfruttare è sicuramente la geo-localizzazione, ossia la possibilità di estrarre le coordinate e altre informazioni geografiche attraverso i dati di rete e le user agents dei browser dell'utente connesso.

Lo scopo finale di questo tutorial sarà quello di creare in poche righe di codice javascript una semplice pagina web dove l'utente potrà visualizzare sulla Google Map il percorso per raggiungere un indirizzo da noi predefinito senza digitare la sua posizione di partenza, con il dettaglio testuale del percorso da effettuare. Potrebbe risultare utile ad esempio utilizzare un applicazione di questo tipo nella pagina dei contatti del tuo sito e renderlo sicuramente più funzionale.

Questa mini-guida si dividerà in due parti:

Determinare la posizione geografica dell'utente
Integrazione con la Google Map v3

Determinare la posizione geografica dell'utente

Prima di iniziare ad entrare nel vivo del codice javascript ti consiglio di dare un'occhiata ai reference W3C dell'interfaccia Geolocation che andremo ad utilizzare.

E' importante che tu faccia riferimento ai documenti ufficiali delle API che utilizzi nei tuoi progetti soprattutto se è la prima volta che le utilizzi; ti risulterà così più semplice scrivere codice avendo le giuste basi teoriche.

La struttura della pagina HTML

La nostra pagina HTML di base sarà composta da:

Un bottone di tipo INPUT che chiamerà all'evento CLICK la nostra funzione javascript di localizzazione (getGeoLocation)
Un contenitore DIV (locationData) che conterrà le informazioni geografiche dell'utente (solo a titolo dimostrativo) o eventuali errori
Un contenitore DIV (map) dove verrà visualizzata la mappa
Un contenitore DIV (panel) dove verranno visualizzate le informazioni sul percorso per raggiungere la destinazione

Il nostro HTML sarà così strutturato:

<!DOCTYPE html&rt;
<!DOCTYPE html>
<html>
<head>
<script>
// Script js
</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>

Funzione getGeoLocation()

Questa funzione javascript si occuperà di inizializzare la chiamate asincrona geolocation.getCurrentPosition(). Prima di far ciò è necessario controllare se il browser corrente supporta l'oggetto HTML5 che stiamo utilizzando. Purtroppo non tutte le versioni di browser lo supportano ancora in pieno, puoi dare un'occhiata al sito HTML5 Test per verificare il tuo.

Se il browser è compatibile, la risposta asincrona verrà gestita dalle funzioni handleGeoLocation() o handleError(); in caso negativo invece (browser che non supporta l'oggetto GeoLocation) lo script stamperà un messaggio di errore nel DIV locationData:

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 :'-(";
}

Funzione handleGeoLocation()

In caso di risposta di tipo success, la chiamata asincrona geolocation.getCurrentPosition() invocherà la funzione handleGetLocation() che ha come parametro di input un oggetto di tipo Position.

Questa funzione leggerà semplicemente la latitudine e la longitudine e le mostrerà a video nel contenitore DIV locationData:

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;
}

Funzione handleError()

E' importante gestire anche gli status di errore che potrebbero impedire il funzionamento del nostro applicativo. In linea generale ricordati che l'utente deve essere informato e consapevole se un servizio da noi offerto non funzione per cause esterne e non solo per una questione di usabilità!

Per questo caso specifico, gli errori possono derivare soprattutto da problemi di rete come timeout o restrinzioni di sicurezza che ne impediscono l'estrazione dei dati:

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;
	}
}

Conclusioni

Come hai potuto vedere, una struttura semplice HTML e poche righe di codice Javascript ti permettono di estrarre i dati di localizzazione dell'utente collegato alla pagina. Grazie a questa funzionalità dell'HTML5 non dovrai più scrivere complicati script server-side e lavorare su dati geografici complessi, soprattutto - per applicativi che avranno un semplice utilizzo - non conviene investire tanto tempo!

La pagina completa realizzata in questa prima parte è la seguente:

<!DOCTYPE html>
<html>
<head>
<script>

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;
}

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;
	}
}

</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>

Per motivi legati alla sicurezza e alla privacy, quando l'utente clicca sul bottone "Definisci il percorso", il browser chiederà il consenso di inviare la propria posizione all'applicativo. Essendo una chiamata asincrona, passerà qualche secondo prima che tu possa vedere la coordinate. Ovviamente lo puoi integrare con jQuery per creare un effetto loading e migliorare l'usabilità.

Nella seconda parte ti mostrerò come integrare quanto fatto con gli script di Google Map v3 per visualizzare una mappa, in base alle coordinate estratte, e tracciare un percorso.

Qui trovi la demo di quanto abbiamo realizzato: GetLocationHTML5.html

Stay tuned!