Come integrare Google Maps sul proprio sito

Transcript

In partnership con:
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
In partnership con:
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.
In partnership con:
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
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>
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 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.
In partnership con:
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.
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 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)
);
In partnership con:
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 );
In partnership con:
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 GTraﬀicOverlay() );
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)
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 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
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 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
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 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
In partnership con:
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
Descrizione
openInfoWindow
(pt, node, opt)
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
openInfoWindowHtml
(pt, html, opt)
Come la precedente ma il contenuto è specificato
come documento HTML
openInfoWindowTabs
(pt, tabs, opt)
Apre una finestra con schede (tab); il contenuto di
ogni scheda è espresso come nodi DOM
openInfoWindowTabsHtml
(pt, tabs, opt)
Come la precedente, ma il contenuto è
specificato come documento HTML
showMapBlowup
(pt, opts?)
Apre una finestra di informazioni il cui contenuto
è una mappa dettagliata del punto in cui viene
aperta
updateInfoWindow
(finestra, callback)
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
updateCurrentTab
(finestra, callback)
Come la precedente, ma si applica a una finestra
di informazioni a schede
closeInfoWindow()
Chiude l’attuale finestra di informazioni aperta
getInfoWindow()
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
In partnership con:
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
// Venezia
// Milano
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”>.
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
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).
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 finestra di informazioni
infowindowopen
Aperta finestra di informazioni
infowindowbeforeclose
Si sta per chiudere la finestra di informazioni
infowindowclose
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);
}
);
}
In partnership con:
function load() {
if (GBrowserIsCompatible()) {
var map = new
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 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
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 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);
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, 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.
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, è 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”
<script src=”http://www.google.com/uds/solutions/localsearch/ gmlocalsearch.js”
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.
In partnership con:
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.

Come integrare Google Maps sul proprio sito

Transcript

Documenti analoghi

A. Novotel Venezia Mestre Castellana

Gimp - Altervista

Walcott Omeroshot!

Google e il suo nuovo +

GOOGLE MAPS API

Canada: Un disco volante nero visibile su Google Earth

Google scommette sul made in Italy

(Tra)scripta Manent La città trascritta nel disegno delle mappe

Questo sito web utilizza Google Analytics, un servizio

Scheda prodotto cod28040009 NAVIGATORE GPS

organizzazione