Introduzione
Nei giorni scorsi ho avuto la necessità di “visualizzare” un indirizzo all’interno di un blog e ho pensato che sarebbe stato carino utilizzare un’immagine satellitare.
La scelta è caduta sulle mappe di Google e così mi sono messo a “studiare” il modo di integrarle e personalizzarle per raggiungere lo scopo.
Il risultato che cercavo è visibile qui. Come si può notare non è niente di eclatante, in fondo le possibilità di personalizzazione ed utilizzo di questo servizio sono enormi. Tuttavia ho pensato di scrivere una piccola guida che mostrasse come raggiungere lo stesso obiettivo in quanto può costituire un buon punto da cui partire per comprendere il funzionamento del sistema messo a disposizione da Google.
Cercherò di spiegare tutto nel modo più semplice possibile, in ogni caso è bene dire che la conoscenza almeno basilare di HTML e JavaScript è fondamentale per la comprensione del tutorial.
Obiettivo
Si vuole mostrare un punto geografico ben preciso di cui si possiede l’indirizzo stradale. La mappa dovrà essere di tipo “ibrido”, quindi visualizzare sia l’immagine satellitare che le strade con i relativi nomi. Il tutto, alla fine, dovrà essere posizionato all’interno della barra laterale di una pagina web.
Procedimento
L’utilizzo delle API di Google Maps è libero per siti gratuiti e accessibili a tutti. Per ogni altro genere di sito e applicazioni intranet sarà necessario usufruire del servizio Enterprise.
Il primo passo da compiere consiste nell’ottenimento di una chiave univoca legata all’indirizzo del sito su cui si andrà ad integrare la mappa. Per ottenere la chiave è sufficiente cliccare qui. Se si tenta di utilizzare la medesima chiave su un dominio diverso si otterrà un messaggio di errore e la mappa non verrà visualizzata.
Il passo successivo prevede l’inserimento tra i tag <head>...</head> del codice Javascript necessario all’impostazione delle caratteristiche della mappa:
-
<script src="http://maps.google.com/maps?file=api&v=2&key=chiave" type="text/javascript"></script>
-
<script type="text/javascript">
-
//< ![CDATA[
-
-
function load()
-
{
-
if (GBrowserIsCompatible())
-
{
-
var map = new GMap2(document.getElementById("map"));
-
map.addControl(new GSmallMapControl(),new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(1, 20)));
-
map.addControl(new GMapTypeControl(),new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(1, 1)));
-
var address = "Via Jelenia Gora 48015 Cervia RA Italy";
-
var geocoder = new GClientGeocoder();
-
geocoder.getLatLng
-
(
-
address,
-
function(point)
-
{
-
if (!point)
-
{
-
alert(address + " non trovato");
-
}
-
else
-
{
-
map.setCenter(point, 13);
-
var marker = new GMarker(point);
-
map.addOverlay(marker);
-
map.setMapType(G_HYBRID_MAP);
-
map.setZoom(16);
-
map.panDirection(0, +1);
-
}
-
}
-
);
-
}
-
}
-
-
//]]>
-
</script>
Vediamo le parti principali dello script:
- riga 1: viene richiamato il file JavaScript dell’applicazione. Necessaria la personalizzazione del parametro
keyche viene passato alla fine: al posto della parola ‘chiave’ va inserita la lunga stringa ottenuta nel primo passo. - riga 5: questa è la funzione che si occuperà di creare la mappa al caricamento della pagina e di visualizzarla nel punto desiderato. Da notare che l’intera operazione viene effettuata solo se il visitatore utilizza un browser compatibile (riga 7).
- riga 9: l’oggetto
map, istanza della classeGMap2, rappresenta la mappa che otterremo; da notare che nella creazione dell’istanza viene indicato il nome dell’elemento della pagina che conterrà la mappa (generalmente unDIV). - righe 10 e 11: vengono aggiunti i controlli per la selezione del tipo di mappa e quelli dedicati allo spostamento e allo zoom. Nel caso specifico ne viene indicata anche la posizione in modo preciso (qui i dettagli).
- riga 12: alla variabile
addressviene assegnato l’indirizzo che si vuole visualizzare. Digitarlo nel modo più completo possibile per avere la certezza (o quasi) che venga trovato. - riga 13: da un’istanza della classe
GClientGeocoderviene creato l’oggettogeocoderche si occuperà di trasformare l’indirizzo che abbiamo indicato nella riga precedente in coordinate geografiche (latitudine e longitudie). - riga 14: utilizzando il metodo
getLatLngdelgeocodersi effettua la trasformazione dell’indirizzo in un punto geografico pronto per essere visualizzato sulla mappa. Qualora il sistema non trovasse l’indirizzo (e quindi un punto corrispondente) viene mostrato un messaggio di errore (riga 21). - riga 25: il punto geografico corrispondente al nostro indirizzo viene posto al centro della mappa.
- righe 26 e 27: in corrispondenza del punto viene posizionato un marcatore; utile ma non necessario.
- riga 28: come era stato detto all’inizio, la mappa dovrà essere visualizzata in modalità ibrida (
G_HYBRID_MAP). - riga 29: viene impostato il livello di zoom; in questo caso il valore è piuttosto alto perchè volevo mostrare una struttura ben precisa. Diminuendo il valore ci si “allontana” da terra.
- riga 30: quest’ultima riga consente di spostare la mappa nella direzione voluta ed è assolutamente facoltativa; l’ho utilizzata per centrare la struttura che volevo mostrare, che altrimenti risultava spostata verso l’alto.
Terminata la fase di personalizzazione è necessario modificare il tag <body> per fare in modo che al caricamento della pagina venga caricata anche la mappa. Il codice risultante sarà simile a questo:
<body onload="load()" onunload="GUnload()">
L’ultimo passo consiste nel creare il blocco che conterrà la mappa. Nel caso specifico si tratta di un <div> largo 200px e alto 300px. Ecco il codice:
<div id="map" style="width: 200px; height: 300px; overflow: hidden;">caricamento della mappa in corso...</div>
Da notare il valore “map” assegnato all’attributo id, esattamente lo stesso passato in fase di creazione dell’oggetto map (riga 9).
Conclusioni
Se tutto è andato per il meglio, a questo punto avrete la mappa ben visibile sulla vostra pagina.
Come dicevo all’inizio, questo è un banale esempio di utilizzo delle API di Google Maps e può essere utile come introduzione all’argomento.
Per soddisfare ogni altro tipo di curiosità e per comprendere meglio il codice proposto, vi rimando alla documentazione ufficiale.
Nessuna Risposta a “Inserire Google Maps in una pagina web”
No feedback yet.