Come integrare Google Maps sul proprio sito · new GOverviewMapControl(), new GControlPosition(...

1 - www.comefarea.it

In partnership con:

Come integrare Google Maps sul proprio sitoAutore: Ivan Venuti Tratto dal libro: JavaScript dalle basi ad Ajax

Tra le più sorprendenti e riuscite applicazioni AJAX realizzate da Google fi gura Google Maps, un’applicazione web che consente di esplorare l’intero pianeta con mappe molto dettagliate e fotografi e satellitari di sicuro effetto. Google Maps viene utilizzato anche da migliaia di siti con diversi utilizzi. In questo articolo Come fare a... vi illustrerà come usare questa applicazione web sulle pagine del vostro sito personalizzandola al meglio.

Mappe per tutti

Oramai le mappe di Google (chiamate Google Maps) compaiono in migliaia di siti di tutti i tipi che offrono un variegato tipo di informazioni: dalle case in vendita ai ritrovi più “in”, fi no alle previsioni meteorologiche o semplici indicazioni stradali per raggiungere un’azienda o un evento. Il loro successo è dovuto sia alla resa grafi ca particolarmente effi cace di ogni mappa, sia alla semplicità d’uso e di personalizzazione. In questo articolo si imparerà a usare le mappe e a creare nuove e sorprendenti applicazioni.

Registrazione

Prima di poter usare le mappe nelle proprie pagine è necessario richiedere un identifi cativo registrandosi alla pagina http://code.google.com/apis/maps/signup.html. L’identifi cativo è legato a uno specifi co dominio. Per questo motivo, in fondo alla pagina di richiesta, è necessario specifi care l’URL del sito dove le mappe verranno pubblicate. Prima di procedere è bene leggere le condizioni d’uso. Tra le più importanti c’è quella per cui le mappe devono essere usate in siti il cui contenuto sia accessibile a tutti, senza vincoli e senza la possibilità di rendere le mappe accessibili a pagamento. Chi volesse realizzare applicazioni a pagamento o “private” deve far riferimento alla versione commerciale, chiamata Google Maps for Enterprise all’indirizzo: http://www.google.com/enterprise/maps/.

Figura 1: per ottenere la chiave è necessario indicare un nome di dominio

http://www.fag.it/scheda.aspx?ID=21754

In partnership con:


La generazione dell’identifi cativo è immediata. Esso è visibile nella pagina successiva dopo aver fatto clic sul pulsante Generate API Key. La stessa pagina specifi ca l’URL per cui l’identifi cativo è valido e presenta una pagina di cui si può fare il copia e incolla per il primo test, come visibile in fi gura 2. Il risultato del test, salvato in una pagina di nome primaMappa.htm, è mostrato in fi gura 3.

Figura 2: la pagina che indica la chiave da usare

Figura 3: la mappa inserita su una pagina

È giunto il momento di analizzare questa prima pagina e, a partire da essa, di illustrare le API che si possono utilizzare per personalizzare le Google Maps.


In partnership con:

Creiamo la prima mappa

La prima riga di interesse consiste nella dichiarazione di inclusione di un fi le JavaScript esterno:

<script src=”http://maps.google.com/maps?fi le=api&v=2&key=<C HIAVE>” type=”text/javascript”></script>

Al posto di <CHIAVE> va inserito l’identifi cativo ottenuto. Il fi le ottenuto contiene la defi nizione degli oggetti per gestire e manipolare le mappe. Il fatto che sia esterno, ovvero fornito da Google, ha due importanti implicazioni: la prima è che si dà la facoltà a Google di cambiare il contenuto delle API in qualsiasi momento (e questo è specifi cato nelle condizioni d’uso accettate in fase di registrazione); la seconda è che le mappe di Google sono accessibili solo quando si è connessi in rete: non è possibile usarle in pagine html visualizzare off-line.Nella pagina c’è anche uno script locale:

function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(“map”)); map.setCenter( new GLatLng(37.4419, -122.1419), 13 ); } }

La funzione fa uso di oggetti e metodi specifi ci di Google Maps. Questi oggetti si possono riconoscere perché iniziano tutti con il prefi sso G. Il primo metodo è GBrowserIsCompatible e il signifi cato è facilmente intuibile: verifi ca che il browser in uso sia compatibile con la libreria (al momento la lista dei browser supportati è piuttosto nutrita: Internet Explorer 6.0, Firefox 0.8, Safari 1.2.4, Netscape 7.1, Mozilla 1.4 e Opera 8.02, comprese tutte le versioni successive). Poi ci sono le seguenti istruzioni, che contengono tre nuovi oggetti e metodi:

var map = new GMap2(document.getElementById(“map”)); map.setCenter( new GLatLng(37.4419, -122.1419), 13 );

Nella prima viene creato un oggetto di tipo GMap2; esso accetta come parametro un elemento della pagina (il cui id è “map”; si vedrà in seguito qual è l’elemento). Successivamente, sull’oggetto creato viene invocato un setCenter: è il centro della mappa, specifi cato da coordinate latitudinali e longitudinali e da un numero (13). Le coordinate sono i numeri utilizzati per costruire l’oggetto GLatLng, mentre il 13 rappresenta il livello di zoom della mappa. Quanto illustrato rappresenta tutte le informazioni necessarie per la costruzione della mappa. Quello che manca è un posto, all’interno della pagina, dove mostrare la mappa e un modo per caricare la funzione; questo è realizzato dal resto della pagina html:

<body onload=”load()” onunload=”GUnload()”> <div id=”map” style=”width: 500px; height: 300px”></div> </body>

In partnership con:


Al caricamento della pagina viene invocata la funzione load e il <div> rappresenta l’elemento con id “map” sul quale verrà mostrata la mappa. È interessante notare che quando la pagina viene chiusa si invoca la funzione GUnload: essa non fa altro che eliminare eventuali oggetti creati e che certi browser non riescono a distruggere. Il suo utilizzo è sempre raccomandato. Approfondimenti Le librerie di Google per le mappe sono in continuo aggiornamento. Un’indispensabile fonte di informazioni sugli oggetti a disposizione e sulle loro proprietà e/o metodi è disponibile alla pagina: http://code.google.com/apis/maps/documentation/reference.html (in inglese). In caso di dubbi specifi ci è la prima pagina da consultare.

Personalizzare della mappaDopo aver salvato la stessa pagina come secondaMappa.htm si può procedere alla sua personalizzazione. Per esempio, si potrebbe centrare la mappa sulle coordinate dell’Italia e con un livello di zoom di 5. Inoltre, è interessante mostrare, al posto della mappa, l’immagine ottenuta da Google Earth (ovvero immagini satellitari della terra). Per farlo, si deve usare il metodo setMapType:

map.setCenter(new GLatLng(42.0, 11.5), 5); map.setMapType(G_SATELLITE_MAP);

Al posto della costante G_SATELLITE_MAP si possono usare G_NORMAL_MAP, per la mappa normale, o G_HYBRID_MAP per una mappa ibrida (ci sono elementi di entrambe le modalità; in particolare, lo sfondo è dato dall’immagine dal satellite e sono evidenziate le principali città e i confi ni). Il risultato della nostra personalizzazione è mostrato in fi gura 4.

Figura 4: la mappa centrata sull’Italia e con l’immagine dal satellite

Controlli Avere una mappa è sicuramente interessante, ma poterla navigare rende ancora più utile la sua fruizione. Google Maps mette a disposizione dei controlli predefi niti per farlo. Il metodo che permette di aggiungerli è:

map.addControl( quale );

La lista dei possibili controlli è sintetizzata nella tabella 1. Ciascun controllo è un oggetto che va creato e assegnato come parametro al metodo precedente.


In partnership con:

Tabella 1: controlli predefi niti di una mappa

GLargeMapControlInserisce, sulla sinistra, un controllo che permette sia di sostare in una direzione qualsiasi, sia di aumentare o diminuire lo zoom.

GSmallMapControlCome il precedente, ma più piccolo e compatto.

GSmallZoomControlDue soli pulsanti: uno per aumentare lo zoom e uno per diminuirlo.

GScaleControlPosiziona in basso la scala (una in miglia, secondo lo standard americano, e una in chilometri).

GMapTypeControlPosiziona in alto a destra diversi pulsanti, uno per ciascun tipo di mappa (normale, satellitare e ibrida). Facendovi clic sopra, l’immagine viene ricaricata nella modalità scelta.

GOverviewMapControlPosiziona in basso a destra un riquadro a uno zoom più elevato per agevolare la navigazione su parti molto distanti rispetto alla mappa visualizzata.

In partnership con:


I diversi controlli si possono anche integrare tra loro. Per esempio, inserendo:

map.addControl(new GOverviewMapControl()); map.addControl(new GMapTypeControl()); map.addControl(new GLargeMapControl());

si ottiene l’immagine di fi gura 5.

Figura 5: la mappa con i controlli per la navigazione

Come si è detto, ciascun controllo ha una sua posizione predefi nita; però, tale posizione può essere variata. Per farlo, va usata una delle costanti tra G_ANCHOR_TOP_RIGHT (alto a destra), G_ANCHOR_TOP_LEFT (alto a sinistra), G_ANCHOR_BOTTOM_RIGHT (in basso a destra) o G_ANCHOR_BOTTOM_LEFT (in basso a sinistra). Questa costante va specifi cata come secondo parametro del costruttore dell’oggetto GControlPosition e l’oggetto così costruito va passato alla funzione addControl come secondo parametro:

map.addControl( new GOverviewMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT) );


In partnership con:

L’oggetto GControlPosition può, a sua volta, avere un secondo parametro, di tipo GSize, che rappresenta l’offset relativo alla posizione specifi cata dal primo parametro. Così, il seguente esempio posiziona il controllo in alto a sinistra, ma spostato di 100 pixel a destra:

map.addControl( new GOverviewMapControl(), new GControlPosition( G_ANCHOR_TOP_LEFT, new GSize(100,0) ) );

Il risultato complessivo è mostrato in fi gura 6.

Figura 6: la mappa con i controlli per la navigazione

Oggetti sulle mappe

Una mappa, con i suoi controlli per navigarla e personalizzarla, è già di per sé un utile strumento da inserire nei siti Web. Però, è ancora più interessante poter intervenire sulle mappe per inserirvi oggetti. Gli oggetti possono essere usati sia come marcatori per evidenziare determinate posizioni (monumenti di interesse, localizzazioni di sedi e così via) sia per inserire linee allo scopo di evidenziare percorsi e direzioni o delimitare aree. L’insieme degli oggetti è chiamato overlay (spesso si preferisce usare i termini in lingua inglese, in quanto la documentazione di Google per le Google Maps è tutta in inglese). Un qualsiasi oggetto viene mostrato sulla mappa quando viene invocato il metodo:

map.addOverlay( quale );

In partnership con:


Informazioni sul traffi co Uno degli overlay predefi niti permette di evidenziare sulla mappa la situazione del traffi co; tale funzionalità è disponibile solo per alcune città e per includerla basta aggiungere un oggetto di tipo GTraffi cOverlay:

map.addOverlay( new GTraff icOverlay() );

Il risultato, a una risoluzione molto elevata, è l’indicazione di un semaforo su ogni città che possiede indicazioni sul traffi co. Facendo clic su un’icona appare l’indicazione della città con un link, visibile in fi gura 7, per visualizzare la mappa dettagliata della città visibile in fi gura 8. I colori indicano la situazione del traffi co: più intenso a mano a mano che si passa dal verde al giallo e, infi ne, al rosso.

Figura 7: città con informazioni sul traffi co

Figura 8: i dettagli in una città (Miami)


In partnership con:

Questo layer può essere utile ed è particolarmente semplice da aggiungere. Ci sono anche altri overlay, molto più semplici altamente personalizzabili e utilizzabili in contesti anche molto diversi.

Marcatori

Un marcatore (marker) viene costruito grazie all’oggetto GMarker. Il costruttore accetta come parametro un punto di tipo GLatLng (lo stesso usato per impostare il centro della mappa). Ecco, pertanto, come inserire un marker proprio al centro della mappa creata in precedenza:

map.addOverlay( new GMarker( new GLatLng(42.0, 11.5) ) );

Di marcatori se ne possono creare senza limiti. Ecco, per esempio, come crearne 30 disposti sui principali assi rispetto al centro come visibile in fi gura 9:

for(i=-5; i<5; i++) map.addOverlay( new GMarker( new GLatLng(42.0 + i, 11.5) ) ); for(i=-10; i<10; i++) map.addOverlay( new GMarker( new GLatLng(42.0, 11.5 + i) ) );

Figura 9: tanti marcatori sugli assi rispetto al centro

In partnership con:


Come accade per le immagini dei documenti HTML, per esempio, anche per i marcatori è possibile associare un tooltip che viene mostrato quando il mouse vi si ferma sopra; lo si fa aggiungendo un ulteriore parametro al costruttore. Tale parametro è un array di coppie chiave, valore. Il tooltip si imposta mediante la proprietà title:

new GMarker(point, {title:”un esempio”});

Un’altra chiave che è possibile specifi care è icon. Il valore può essere una qualsiasi immagine usata come icona sulla mappa:

new GMarker(point, {icon: quale});

Tale icona è un oggetto di tipo GIcon:

var icona1 = new GIcon(G_DEFAULT_ICON); icona1.image = “test1.png”; map.addOverlay( new GMarker( new GLatLng(45.0, 10.5), {icon: icona1} ) );

In questo modo è possibile inserire numerosi marcatori auto-esplicativi. In fi gura 10, per esempio, sono mostrati quattro avatar che potrebbero riferirsi ad altrettanti amici localizzati su una mappa.

Figura 10: tanti marcatori sugli assi rispetto al centro


In partnership con:

Si noti che un’icona non è solo l’immagine di primo piano. Infatti, GIcon ha molte altre proprietà; esse sono elencate in tabella 2.

Tabella 2: alcune proprietà per l’oggetto Glcon

Proprietà Descrizione

image URL con immagine in primo piano associata all’icona

shadow URL con immagine che fa da ombra all’icona

iconSize Oggetto GSize con le dimensioni dell’icona in primo piano

shadowSize Oggetto GSize con le dimensioni dell’ombra

printImage URL all’immagine da usarsi per la stampa

printShadow URL all’immagine che fa da ombra da usarsi per la stampa

imageMap Coordinate x ed y espresse come array di interi. Ciascuna coppia defi nisce una regione di mappa cliccabile (non funziona con Internet Explorer)

Finestre di informazione Su ogni mappa è possibile inserire una (e non più di una) fi nestra di informazione. Essa appare come un fumetto, al cui interno è possibile specifi care qualsiasi testo html; si aggiunge a una mappa esistente con:

map.openInfoWindowHtml(punto, qualeHtml);

dove punto è il solito oggetto di tipo GLatLng e qualeHtml contiene il codice html da visualizzare all’interno della fi nestra. Per esempio:

map.openInfoWindowHtml( new GLatLng(42.0, 11.5), “<p>Testo</p>” );

fa visualizzare la fi nestra mostrata in fi gura 11.

Figura 11: una fi nestra che appare come un fumetto sulla mappa

In partnership con:


Esistono anche altri tipi di fi nestre. In tabella 3 è riportata per ciascuna una breve descrizione.

Tabella 3: tipi di fi nestre di informazioni associabili a una mappa

Finestra Descrizione

openInfoWindow(pt, node, opt)

Crea una fi nestra di informazioni sul punto pt. Il contenuto della fi nestra è il secondo parametro come elemento del DOM; nel terzo, opzionale, sono specifi cate eventuali personalizzazioni

openInfoWindowHtml(pt, html, opt)

Come la precedente ma il contenuto è specifi cato come documento HTML

openInfoWindowTabs(pt, tabs, opt)

Apre una fi nestra con schede (tab); il contenuto di ogni scheda è espresso come nodi DOM

openInfoWindowTabsHtml(pt, tabs, opt)

Come la precedente, ma il contenuto è specifi cato come documento HTML

showMapBlowup(pt, opts?)

Apre una fi nestra di informazioni il cui contenuto è una mappa dettagliata del punto in cui viene aperta

updateInfoWindow(fi nestra, callback)

Aggiorna il contenuto della fi nestra di informazioni che risulta aperta. L’ultimo parametro specifi ca, opzionalmente, una funzione callback che viene richiamata quando il contenuto viene effettivamente aggiornato

updateCurrentTab(fi nestra, callback)

Come la precedente, ma si applica a una fi nestra di informazioni a schede

closeInfoWindow() Chiude l’attuale fi nestra di informazioni aperta

getInfoWindow() Recupera l’oggetto della fi nestra di informazioni della mappa. Se non esiste, la fi nestra viene creata, ma non visualizzata

Attenzione Se si usano delle immagini dentro il codice HTML di una pagina di informazioni, è importante specifi care le loro dimensioni (con gli attributi width, per la larghezza, e height, per l’altezza). In caso contrario, può darsi che la fi nestra di informazioni si apra con dimensioni errate e lasci trasbordare l’immagine contenuta.

Spezzate e poligoni

Su una mappa è possibile defi nire una serie di punti di lunghezza arbitraria e far sì che i punti, a due a due, siano congiunti con una linea spezzata. Per farlo si usa un oggetto di tipo GPolyline. Per costruire una spezzata si può usare il seguente metodo:

GPolyline( arrayPunti, colore, peso, opacità, opzioni)

Solo l’arrayPunti è un parametro obbligatorio: è un array di oggetti di tipo GLatLng che rappresentano i vertici della spezzata. Il colore è quello usato per disegnare la linea (si utilizzano i normali colori


In partnership con:

esadecimali nel formato HTML). Il peso è la larghezza della linea disegnata (misurata in pixel). Se è specifi cata (il numero deve essere compreso tra 0, per nulla opaca, e 1, completamente opaca) l’opacità indica come si vede in trasparenza la mappa sottostante. Ecco un esempio di spezzata i cui vertici sono Roma, Firenze, Venezia e Milano, visibile in fi gura 12.

var punti = []; // Roma punti[0] = new GLatLng (41.926803, 12.469482); // Firenze punti[1] = new GLatLng (43.773077, 11.255493); // Venezia punti[2] = new GLatLng (45.437008, 12.338033); // Milano punti[3] = new GLatLng (45.463983, 9.1873169); var pol = new GPolyline( punti, “#000000”, “10”, “0.5”); map.addOverlay(pol);

Figura 12: esempio di polyline

Attenzione Affi nché Internet Explorer interpreti correttamente le mappe contenenti spezzate e poligoni, è necessario che l’intestazione della pagina html contenga quanto segue:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>.

In partnership con:


Una volta costruita la spezzata, l’oggetto GPolyline che la rappresenta possiede alcuni metodi interessanti. Primi fra tutti: hide(), per nasconderla, show(), per visualizzarla, e getLength(), per restituire la lunghezza totale in metri. Per esempio, usando questa alert si può sapere che, sulla base della mappa appena vista, andando da Roma a Milano passando per Firenze e Venezia si percorre una distanza in linea d’aria di 678.334 metri:

alert(“Distanza totale: “+ pol.getLength()+ “ metri”);

Si faccia attenzione al fatto che la lunghezza calcolata comprende il calcolo del raggio di curvatura della superfi cie terrestre. Ma come trovare agevolmente le coordinate delle varie città? Farlo “per tentativi” è oltremodo dispendioso. O si conosce un indirizzo (e si vedrà in seguito cosa farne) oppure si potrebbe fare clic sul punto della mappa e conoscerne le coordinate. Per farlo, è necessario gestire gli eventi…

Gestire gli eventi

Per gestire l’interazione degli utenti con la mappa si deve riuscire ad “ascoltare” la loro attività, sia essa un clic su un oggetto della mappa, il movimento del mouse sopra certe zone o altri eventi a cui si è interessati per fornire, al loro verifi carsi, risposte personalizzate. Per farlo si usa un namespace chiamato GEvent (un namespace non è propriamente un oggetto, ma un suffi sso che permette di identifi care l’origine degli oggetti che seguono). Esso, in particolare, include la funzione addListener, che accetta tre argomenti: l’oggetto su cui mettersi in ascolto, l’evento da ascoltare (sua descrizione) e la funzione da invocare al verifi carsi dell’evento:

GEvent.addListener( map, “click”, function() { alert(“Hai fatto clic”); } );

Il metodo addListener indica di associare un “ascoltatore” (ovvero una funzione che risponde a determinati eventi) alla mappa specifi cata come primo parametro; il secondo parametro specifi ca l’evento e il terzo e ultimo parametro indica la funzione da invocare al verifi carsi dell’evento (questa è chiamata anche funzione di callback). Alcuni tra gli eventi intercettabili sono elencati in tabella 4 (per altri eventi si veda all’indirizzo:http://econym.googlepages.com/gevent.htm).


In partnership con:

Tabella 4: gli eventi intercettabili

Evento Descrizione

click Clic con il pulsante del mouse

dblclick Doppio clic del mouse

mousemove C’è stato un movimento del mouse

mouseover Il cursore del mouse è sopra l’elemento

mouseout Il cursore del mouse ha abbandonato l’elemento

mousedown Pulsante del mouse premuto

mouseup Pulsante del mouse rilasciato

drag Spostamento

dragstart Inizio di un nuovo spostamento

dragend Termine dello spostamento

infowindowprepareopen Si sta per aprire una fi nestra di informazioni

infowindowopen Aperta fi nestra di informazioni

infowindowbeforeclose Si sta per chiudere la fi nestra di informazioni

infowindowclose La fi nestra di informazioni è stata chiusa

Ovviamente, l’oggetto su cui ci si può mettere in ascolto può essere sì una mappa, ma anche uno degli oggetti in essa contenuti (marker, polyline, fi nestre di informazioni e così via). Una volta impostato un listener, esso resta sempre in ascolto. Se, in un momento successivo, lo si volesse togliere, è necessario dapprima memorizzare l’oggetto restituito dalla funzione, poi occorre usarlo come parametro per la funzione removeListener:

var eventListener = GEvent.addListener(...); // ... fai altro GEvent.removeListener(eventListener);

Ecco come potremmo realizzare una semplice applicazione che notifi ca alcuni tra gli eventi disponibili su di una mappa. Essa fa uso di una funzione di utilità (addEvento) con due argomenti obbligatori e un terzo facoltativo: i primi due servono a conoscere l’oggetto e l’evento da ascoltare; il terzo indica se, dopo aver intercettato il primo evento, si deve togliere il listener o meno (questo perché alcuni eventi, come mousemove, sono piuttosto frequenti e avere ogni volta una fi nestra di notifi ca è troppo scomodo):

function addEvento(map, evento, remove){ var listener = GEvent.addListener( map, evento, function() { if (remove) GEvent.removeListener(listener); alert(“Evento: “+evento); } ); }

In partnership con:


function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(“map”)); map.setCenter( new GLatLng(37.4419, -122.1419), 13); map.addControl(new GLargeMapControl()); addEvento(map, “click”); addEvento(map, “mousemove”, true); addEvento(map, “mouseout”, true); addEvento(map, “mouseover”, true); addEvento(map, “zoom”); addEvento(map, “drag”); addEvento(map, “move”); }}

Informazioni associate Nel caso di alcuni eventi, la funzione può anche ricevere dei parametri. È questo il caso dell’evento clic. In particolare, la funzione riceve due parametri: uno è overlay, l’altro point. Da quest’ultimo si possono ricavare le coordinate del punto dov’è stato fatto clic. Ma è anche possibile conoscere lo stato della mappa al momento del clic: infatti, accedendo all’oggetto map e ai metodi getCenter e getZoom, si può sapere dov’è centrata la mappa al momento del clic e il suo livello di zoom.Ecco un esempio che mostra tutte queste informazioni in un fumetto, vedi fi gura 13:

GEvent.addListener(map,”click”, function(overlay,point) { var myHtml = “<p>click sul punto: (“ + point.lat() + “, “+ point.lng() +”)<br/>”+ “con mappa centrata su “ + map.getCenter()+ “ con zoom “+ map.getZoom()+”</p>”; map.openInfoWindow(point, myHtml); });

Figura 13: informazioni sul punto e stato della mappa al momento del clic


In partnership con:

Dagli indirizzi alle coordinate

Collegandosi alla pagina http://maps.google.it e digitando un indirizzo, Google mostra una mappa con al centro la localizzazione dell’indirizzo cercato; l’indirizzo può essere nella forma “nome via/piazza, numero, città, provincia, stato”. Non tutte le informazioni sono obbligatorie; in fi gura 14, per esempio, è mostrata la mappa ottenuta cercando “Corso Sempione, Milano”. Il processo di localizzazione si chiama anche georeferenziazione.

Figura 14: localizzazione di un indirizzo (georeferenziazione)

In alcune applicazioni potrebbe essere utile riuscire a compiere questa operazione: in pratica, dato un qualsiasi indirizzo, si potrebbe desiderare di visualizzarlo sulla mappa; per farlo, è necessario recuperare le coordinate del punto identifi cato. La classe utilizzabile per questo è GClientGeocoder. Questa classe, una volta istanziata, ha dei metodi che permettono di interagire con i server di Google al fi ne di ottenere le georeferenziazioni degli indirizzi. Il metodo che lo fa, getLatLng, ha due parametri: l’indirizzo da localizzare e la funzione callback, che viene invocata quando il risultato è reso disponibile. Ecco un esempio, basato sull’indirizzo dell’esempio precedente:

var mostra = new function(punto){ alert(“Latitudine: “+punto.lat()+ “ Longitudine: “+punto.lng()); }; var coder = new GClientGeocoder(); coder.getLatLng(“corso sempione, milano”, mostra);

In partnership con:


Oppure, si posso sfruttare i marker. Ecco come visualizzarli in base a un array di indirizzi (il risultato è mostrato in Figura 15):

var marker = function(punto){ map.addOverlay( new GMarker( punto ) ); }; var coder = new GClientGeocoder(); coder.getLatLng(“corso sempione, milano” ,marker); coder.getLatLng(“piazza del quirinale, roma” ,marker); coder.getLatLng(“piazza san marco, venezia” ,marker); coder.getLatLng(“piazza della signoria, fi renze” ,marker);

Figura 15: localizzazione di indirizzi e loro visualizzazione tramite dei marker

Alcune applicazioni

Ognuno di noi potrebbe pensare di realizzare mappe relative alla propria città (con informazioni turistiche, gastronomiche, sportive o relative a qualsiasi altro interesse). Per esempio, all’indirizzo: http://ivenuti.altervista.org/tour-di-pisa.htm, potete trovare un tour di Pisa corredato da informazioni sui monumenti da visitare e sul percorso ottimale per realizzarlo. Altri esempi di applicazioni riguardano la localizzazione di taxi o autobus (si pensi a un’azienda di trasporti che, in tempo reale, potrebbe fornire indicazioni sulle autovetture in movimento), ma anche la localizzazione di librerie dove trovare certi libri o, ancora, i luoghi dove si svolgono eventi o manifestazioni e così via. Bisogna inoltre considerare che qualsiasi sito aziendale potrebbe fornire, grazie a Google Maps, informazioni su come raggiungere le proprie sedi.


In partnership con:

Ricerche commerciali Google sta puntando molto sulla georeferenziazione delle attività commerciali. Questo gli consente di proporre le aziende che rispondono a determinate parole chiave di ricerca e sono localizzate nella zona di interesse dell’utente. La cosa interessante è che questa funzionalità è integrabile in maniera molto semplice nelle Google Maps. Infatti, è suffi ciente utilizzare un controllo, chiamato Local Search Control, e assegnarlo (come si fa per gli altri controlli) alla propria mappa. Per esempio, si potrebbe inserire la seguente istruzione in una propria pagina Web:

map.addControl(new google.maps.LocalSearch());

L’unico inconveniente, se così si può dire, è che questo controllo fa parte di un fi le JavaScript diverso da quello standard. Per questo motivo è necessario inserire anche queste istruzioni in testa alla pagina (nella usuale sezione all’interno dello header): <script src=”http://www.google.com/uds/api?fi le=uds. js&v=1.0&key=PROPRIA_CHIAVE” type=”text/javascript”></script>

<script src=”http://www.google.com/uds/solutions/localsearch/ gmlocalsearch.js” type=”text/javascript”></script>

Il componente fa anche uso di propri CSS; essi vanno inclusi con le seguenti istruzioni:

<style type=”text/css”> @import url( “http://www.google.com/uds/css/gsearch.css”); @import url( “http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css”); </style>

Approfondimenti Maggiori informazioni sul componente sono disponibili alla pagina:http://www.google.com/uds/solutions/localsearch/index.html; per le informazioni specifi che sulla sua gestione e personalizzazione si può far riferimento alla pagina: http://www.google.com/uds/solutions/localsearch/reference.html.

Come guadagnarci? AdSense! Siccome Google guadagna grazie agli annunci delle aziende, permette di condividere parte del proprio guadagno con i Web Master che espongono i suoi servizi. Per farlo, è suffi ciente aprire un account su AdSense, lo strumento di controllo degli annunci di Google. Usando il Local Search Control è possibile fornire il proprio id di AdSense e iniziare a guadagnare con le ricerche effettuate dai propri utenti. In questo modo si ha un duplice vantaggio: si offre un servizio all’utente e si guadagna grazie a Google.

Novità… dove? Le Google Maps, come tutte le API di Google, sono un progetto in continuo divenire. Vengono aggiornate e migliorate in maniera molto veloce. È perciò importante sapere dove si possono reperire le informazioni più aggiornate sulle novità introdotte. Molto utile è il blog uffi ciale di tutte le novità, che è consultabile alla pagina: http://googlemapsapi.blogspot.com/. Invece, il luogo ideale dove chiedere consiglio in caso di eventuali dubbi è il newsgroup dedicato alle mappe, raggiungibile all’indirizzo: http://groups.google.com/group/Google-Maps-API.

In partnership con:


Conclusioni

Le Google Maps sono un sorprendente esempio di applicazioni AJAX fl essibili e notevolmente scenografi che. Se poi si considera che le mappe possono essere affi ancate a dati presenti sugli altri servizi di Google (da Google Mail, ai fogli di lavoro, ai blog) si comprende come la fl essibilità di tale strumento sia davvero ai massimi livelli. I possibili impieghi delle Google Maps sono innumerevoli e saperle utilizzare rappresenta un’interessante marcia in più per aggiungere un tocco di professionalità e di sicuro impatto alle proprie applicazioni web.Per mantenervi sempre aggiornati sulle novità che renderemo disponibili, abbonatevi alla nostra newsletter all’indirizzo: http://www.comefarea.it/newsletter/ o, se utilizzate Windows Live Messenger abbonatevi al nostro Windows Live Alerts all’indirizzo http://www.comefarea.it/abbonamenti.php.

Il Libro

JavaScript dalle basi ad AjaxDa sempre chi realizza pagine HTML sente la necessità di renderle “interattive” e di aggiungervi sofi sticati effetti grafi ci o animazioni. Questo è possibile, senza ricorrere a plug in di terze parti, inserendo script in JavaScript. Gli script, oltre ad arricchire e rendere più sofi sticate le applicazioni, possono anche aiutare a validare i dati, fornire funzionalità avanzate come l’auto-completamento dei campi e così via. Tutto questo può essere fatto anche evitando, grazie ad AJAX, di aggiornare le pagine, superando così l’usuale meccanismo di richiesta/risposta delle pagine HTML tradizionali. Il libro, partendo dalle basi, aiuta a conoscere e comprendere tutte le caratteristiche del linguaggio, comprese quelle avanzate e per questo più utili. Dopo i necessari fondamenti teorici, presenta come realizzare applicazioni AJAX e mostra l’uso di sofi sticati framework per realizzare script complessi, senza dover scrivere molto codice e facendo sì che i progetti

realizzati siano interoperabli tra i diversi browser. Il tutto mostrando applicazioni concrete che, tra le altre cose, fanno uso di Google Maps per presentazioni particolarmente accattivanti e intuitive. Tra gli argomenti: - Le basi del linguaggio e le sue diverse versioni; - Come interagire con le pagine HTML; - L’uso della programmazione ad oggetti e gli oggetti predefi niti; - Cosa si intende per applicazioni AJAX e quali sono gli oggetti che ne permettono la realizzazione; - Framework per realizzare funzionalità avanzate e interoperabili, quali Prototype e Scriptaculous; - Le Google Maps: come utilizzarle e personalizzarle nelle proprie pagine.

Se desideri acquistare questo libro vai all’indirizzo: http://www.fag.it/scheda.aspx?ID=21754

La recensionePer conoscere e approfondire gli argomenti trattati del libro è disponibile la recensione di questo manuale. Visita la pagina JavaScript dalle basi ad Ajax disponibile all’indirizzo: http://www.comefarea.it/recensioni/javascriptdallebasiadajax/

L’autoreIvan Venuti: autore di numerosi libri sulla programmazione e sulle tecnologie Web, è un analista/programmatore di applicazioni aziendali che fanno uso di varie tecnologie server e client. Da anni scrive per le principali riviste di informatica italiane ed è membro attivo di forum e gruppi di discussione dedicati ai linguaggi di programmazione.

Come integrare Google Maps sul proprio sito · new GOverviewMapControl(), new GControlPosition(...

Documents

Transcript of Come integrare Google Maps sul proprio sito · new GOverviewMapControl(), new GControlPosition(...