Come integrare Google Maps sul proprio sito

Come integrare Google Maps sul proprio sito Autore: Ivan Venuti Tratto dal libro: JavaScript dalle basi ad Ajax Tra le più sorprendenti e riuscite applicazioni AJAX realizzate da Google figura Google Maps, un applicazione web che consente di esplorare l intero pianeta con mappe molto dettagliate e fotografie 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, fino alle previsioni meteorologiche o semplici indicazioni stradali per raggiungere un azienda o un evento. Il loro successo è dovuto sia alla resa grafica particolarmente efficace 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 identificativo registrandosi alla pagina http://code.google.com/apis/maps/signup.html. L identificativo è legato a uno specifico dominio. Per questo motivo, in fondo alla pagina di richiesta, è necessario specificare 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 1 - www.comefarea.it

La generazione dell identificativo è immediata. Esso è visibile nella pagina successiva dopo aver fatto clic sul pulsante Generate API Key. La stessa pagina specifica l URL per cui l identificativo è valido e presenta una pagina di cui si può fare il copia e incolla per il primo test, come visibile in figura 2. Il risultato del test, salvato in una pagina di nome primamappa.htm, è mostrato in figura 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. 2 - www.comefarea.it

Creiamo la prima mappa La prima riga di interesse consiste nella dichiarazione di inclusione di un file JavaScript esterno: <script src= http://maps.google.com/maps?file=api&v=2&key=<c HIAVE> type= text/javascript ></script> Al posto di <CHIAVE> va inserito l identificativo ottenuto. Il file ottenuto contiene la definizione 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 è specificato 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 specifici di Google Maps. Questi oggetti si possono riconoscere perché iniziano tutti con il prefisso G. Il primo metodo è GBrowserIsCompatible e il significato è facilmente intuibile: verifica 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, specificato 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> 3 - www.comefarea.it

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 specifici è la prima pagina da consultare. Personalizzare della mappa Dopo 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 confini). Il risultato della nostra personalizzazione è mostrato in figura 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 predefiniti 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. 4 - www.comefarea.it

Tabella 1: controlli predefiniti di una mappa GLargeMapControl Inserisce, sulla sinistra, un controllo che permette sia di sostare in una direzione qualsiasi, sia di aumentare o diminuire lo zoom. GSmallMapControl Come il precedente, ma più piccolo e compatto. GSmallZoomControl Due soli pulsanti: uno per aumentare lo zoom e uno per diminuirlo. GScaleControl Posiziona in basso la scala (una in miglia, secondo lo standard americano, e una in chilometri). GMapTypeControl Posiziona 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. GOverviewMapControl Posiziona in basso a destra un riquadro a uno zoom più elevato per agevolare la navigazione su parti molto distanti rispetto alla mappa visualizzata. 5 - www.comefarea.it

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 figura 5. Figura 5: la mappa con i controlli per la navigazione Come si è detto, ciascun controllo ha una sua posizione predefinita; 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 specificata 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) 6 - www.comefarea.it

L oggetto GControlPosition può, a sua volta, avere un secondo parametro, di tipo GSize, che rappresenta l offset relativo alla posizione specificata 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 figura 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 7 - www.comefarea.it

Informazioni sul traffico Uno degli overlay predefiniti permette di evidenziare sulla mappa la situazione del traffico; tale funzionalità è disponibile solo per alcune città e per includerla basta aggiungere un oggetto di tipo GTrafficOverlay: map.addoverlay( new GTrafficOverlay() Il risultato, a una risoluzione molto elevata, è l indicazione di un semaforo su ogni città che possiede indicazioni sul traffico. Facendo clic su un icona appare l indicazione della città con un link, visibile in figura 7, per visualizzare la mappa dettagliata della città visibile in figura 8. I colori indicano la situazione del traffico: più intenso a mano a mano che si passa dal verde al giallo e, infine, al rosso. Figura 7: città con informazioni sul traffico Figura 8: i dettagli in una città (Miami) 8 - www.comefarea.it

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 figura 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 9 - www.comefarea.it

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 specificare è 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 figura 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 10 - www.comefarea.it

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à image shadow iconsize shadowsize printimage printshadow imagemap Descrizione URL con immagine in primo piano associata all icona URL con immagine che fa da ombra all icona Oggetto GSize con le dimensioni dell icona in primo piano Oggetto GSize con le dimensioni dell ombra URL all immagine da usarsi per la stampa URL all immagine che fa da ombra da usarsi per la stampa Coordinate x ed y espresse come array di interi. Ciascuna coppia definisce una regione di mappa cliccabile (non funziona con Internet Explorer) Finestre di informazione Su ogni mappa è possibile inserire una (e non più di una) finestra di informazione. Essa appare come un fumetto, al cui interno è possibile specificare 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 finestra. Per esempio: map.openinfowindowhtml( new GLatLng(42.0, 11.5), <p>testo</p> fa visualizzare la finestra mostrata in figura 11. Figura 11: una finestra che appare come un fumetto sulla mappa 11 - www.comefarea.it

Esistono anche altri tipi di finestre. In tabella 3 è riportata per ciascuna una breve descrizione. Tabella 3: tipi di finestre di informazioni associabili a una mappa Finestra openinfowindow (pt, node, opt) openinfowindowhtml (pt, html, opt) openinfowindowtabs (pt, tabs, opt) openinfowindowtabshtml (pt, tabs, opt) showmapblowup (pt, opts?) updateinfowindow (finestra, callback) updatecurrenttab (finestra, callback) closeinfowindow() getinfowindow() Descrizione Crea una finestra di informazioni sul punto pt. Il contenuto della finestra è il secondo parametro come elemento del DOM; nel terzo, opzionale, sono specificate eventuali personalizzazioni Come la precedente ma il contenuto è specificato come documento HTML Apre una finestra con schede (tab il contenuto di ogni scheda è espresso come nodi DOM Come la precedente, ma il contenuto è specificato come documento HTML Apre una finestra di informazioni il cui contenuto è una mappa dettagliata del punto in cui viene aperta Aggiorna il contenuto della finestra di informazioni che risulta aperta. L ultimo parametro specifica, opzionalmente, una funzione callback che viene richiamata quando il contenuto viene effettivamente aggiornato Come la precedente, ma si applica a una finestra di informazioni a schede Chiude l attuale finestra di informazioni aperta Recupera l oggetto della finestra di informazioni della mappa. Se non esiste, la finestra viene creata, ma non visualizzata Attenzione Se si usano delle immagini dentro il codice HTML di una pagina di informazioni, è importante specificare le loro dimensioni (con gli attributi width, per la larghezza, e height, per l altezza). In caso contrario, può darsi che la finestra di informazioni si apra con dimensioni errate e lasci trasbordare l immagine contenuta. Spezzate e poligoni Su una mappa è possibile definire 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 12 - www.comefarea.it

esadecimali nel formato HTML). Il peso è la larghezza della linea disegnata (misurata in pixel). Se è specificata (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 figura 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 Affinché 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 >. 13 - www.comefarea.it

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 superficie 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 verificarsi, risposte personalizzate. Per farlo si usa un namespace chiamato GEvent (un namespace non è propriamente un oggetto, ma un suffisso che permette di identificare 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 verificarsi 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 specificata come primo parametro; il secondo parametro specifica l evento e il terzo e ultimo parametro indica la funzione da invocare al verificarsi 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). 14 - www.comefarea.it

Tabella 4: gli eventi intercettabili Evento click dblclick mousemove mouseover mouseout mousedown mouseup drag dragstart dragend infowindowprepareopen infowindowopen infowindowbeforeclose infowindowclose Descrizione Clic con il pulsante del mouse Doppio clic del mouse C è stato un movimento del mouse Il cursore del mouse è sopra l elemento Il cursore del mouse ha abbandonato l elemento Pulsante del mouse premuto Pulsante del mouse rilasciato Spostamento Inizio di un nuovo spostamento Termine dello spostamento Si sta per aprire una finestra di informazioni Aperta finestra di informazioni Si sta per chiudere la finestra di informazioni La finestra 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, finestre 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 notifica 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 finestra di notifica è troppo scomodo): function addevento(map, evento, remove){ var listener = GEvent.addListener( map, evento, function() { if (remove) GEvent.removeListener(listener alert( Evento: +evento } } 15 - www.comefarea.it

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 } } In partnership con: 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 figura 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 16 - www.comefarea.it

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 figura 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 identificato. La classe utilizzabile per questo è GClientGeocoder. Questa classe, una volta istanziata, ha dei metodi che permettono di interagire con i server di Google al fine 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 17 - www.comefarea.it

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, firenze,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. 18 - www.comefarea.it

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, è sufficiente 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 file 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?file=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 specifiche 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, è sufficiente 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 ufficiale 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. 19 - www.comefarea.it

Conclusioni Le Google Maps sono un sorprendente esempio di applicazioni AJAX flessibili e notevolmente scenografiche. Se poi si considera che le mappe possono essere affiancate a dati presenti sugli altri servizi di Google (da Google Mail, ai fogli di lavoro, ai blog) si comprende come la flessibilità 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 Ajax Da sempre chi realizza pagine HTML sente la necessità di renderle interattive e di aggiungervi sofisticati effetti grafici o animazioni. Questo è possibile, senza ricorrere a plug in di terze parti, inserendo script in JavaScript. Gli script, oltre ad arricchire e rendere più sofisticate 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 sofisticati 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 predefiniti; - 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 recensione Per 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 autore Ivan 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. 20 - www.comefarea.it