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