Appunti e tutorial su front-end web technology

Per calcolare un itinerario e visualizzarlo sulla nostra Google Maps sarà necessario lavorare con i services messi a disposizione da Google. Dopo aver inserito la nostra mappa ed averla centrata possiamo procedere con le personalizzazioni necessarie: la prima di queste prevede l’inserimento nell’html della pagina di un secondo box, oltre a quello che ospita la mappa, dove inseriremo le “istruzioni di viaggio”:

<div id=”miamappa” style=” float:left; width:70%; height:650px;”></div>
<div id=”istruzioni” style=” float:left; width:30%; height:650px;”></div>

Nello scirpt innanzitutto modifichiamo il collegamento alla libreria specificando la lingua della risposta:

<script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false&language=it”></script>

Nella parte di script vera e propria definiamo due variabili:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();

directionsService ci servirà per chiamare il servizio, mentre directionDisplay servirà per visualizzare le informazioni.

Ora la funazione che calcola il percorso:

function calcRoute() {
var start = ‘Milano’;
var end = ‘Varese, Italia’;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}

Le variabili start e end servono per stabilire i punti di partenza e arrivo, chiaramente possono esere recuperati da form, database, etc

Per il TravelMode possiamo scegliere fra driving e walking (in usa anche BICYCLING).

Le ultime istruzioni sono l’esecuzione della chiamata.

Per completare la pagina dobbiamo inizializzare la nostra mappa:

function inizializza() {
directionsDisplay = new google.maps.DirectionsRenderer();
var milano = new google.maps.LatLng(45.463681, 9.188171);
var mapOptions = {
zoom: 10,
center: milano,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map =  new google.maps.Map(

document.getElementById(“miamappa”),

mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById(“istruzioni”));
calcRoute();
}

dove si deve renderizzare il percorso e nelle ultime due istruzioni scrivere il percorso nel box di destra e disegnarlo sulla mappa.

Ecco l’esempio completo.

Un problema molto frequente è che spesso vogliamo inserire un marker a partire da un indirizzo e non dalle sue coordinate che quindi dovranno essere calcolate in modo automatico.

L’oggetto che si occupa della traduzione in coordinate del nostro indirizzo si chiama geocoder e lo inizializziamo nella funzione che crea la mappa:

geocoder = new google.maps.Geocoder();

Successivamente, a partire da un indirizzo, chiameremo una funzione che si occuperà di tradurre l’indirizzo in coordinate e piazzare una marker nelle coordinate individuate:

function codeAddress() {
 var address = document.getElementById(“address”).value;
 geocoder.geocode( { ‘address’: address}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 map.setCenter(results[0].geometry.location);
 var marker = new google.maps.Marker({
 map: map,
 position: results[0].geometry.location
 });
 }
 else {alert(“Geocode non ha trovato la posizione per il seguente motivo: ” + status);}
 });
 }

La prima istruzione assegna alla variabile address l’indirizzo che in questo caso viene preso da un campo di input.

Successivamente richiediamo le coordinate; se l’operazione va a buon fine, cioè geocoderstatus è ok, le coordinate vengono restituite nell’array results (results[0].geometry.location)

in modo da centrare la mappa sulle nuove coordinate e aggiungere il marker. Se si verifica un errore comparirà un alert, volendo possiamo eliminare l’istruzione contenuta nell’else.

L’esempio completo

Per aggiungere una descrizione ad un marker presente nella Google Maps dovremo decidere l’evento che permetterà la visualizzazione della descrizione, in genere è il click sul marker e ovviamente il testo da visualizzare. Quindi il codice javascript della nostra mappa dovrà essere personalizzato in questo modo:

var mieinfo = new google.maps.InfoWindow(
{content: “Mi trovo esttamente<br /><strong>qui</strong>”}
);

google.maps.event.addListener(
marker,
‘click’,
function() {mieinfo.open(map,marker);}
);

In pratica la variabile mieinfo serve per stabilire il testo che andremo a visualizzare;

mentre nella seconda riga aggiungiamo l’evento click al nostro marker.

L’esempio completo

Come inserire una Google Maps nel proprio sito web?

Innanzitutto partiamo dalle versioni a nostra disposizione, attualmente lavoriamo con la versione 3, la documentazione e alcuni tutorial sono disponibili a questo indirizzo:

http://code.google.com/intl/it-IT/apis/maps/documentation/javascript/

Una novità di questa versione è che non è più necessario registrarsi e acquisire una chiave per usare le Google Maps.

La prima operazione è inserire nell’intestazione della pagina il collegamento alla libreria javascript: <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?sensor=false”></script>. Il parametro sensor può avere valore true o false, si metterà il parametro a true se si vuole avere la possibilità di usare la localizzazione gps.

Il secondo passaggio sarà quello di inserire nella propria pagina il box che conterrà la Google Maps:

<div id=”miamappa”></div>

e formattarlo opportunamente con un css, almeno per assegnare le dimensioni. (es. css inline style=”width:400px; height:300px;”).

Per il terzo passaggio torniamo nell’intestazione e inseriamo lo script necessario per la visualizzazione della mappa e la sua centratura:

<script type=”text/javascript”>
 var map;

function inizializza() {
 var milano = new google.maps.LatLng(45.463681, 9.188171);
 var mapOptions = {
 zoom: 12,
 center: milano,
 mapTypeId: google.maps.MapTypeId.TERRAIN
 };
 map =  new google.maps.Map(document.getElementById(“miamappa”), mapOptions);
 }
 </script>

La prima riga della funzione inizializza stabilisce le coordinate del punto al centro della mappa. che verrà usata nella variabile mapOptions. Per quanto riguarda gli altri due parametri zoom stabilisce il livello di detaglio della mappa e mapTypeId la tipologia della stessa.

Infine lanciamo la funzione inizializza al caricamento della pagina: <body onload=inizializza();>

Vedi l’esempio completo (visualizza codice sorgente per copiare)