DarCas Sandbox

Google Maps è il servizio più conosciuto al mondo per quanto riguarda i servizi di cartografia. Certo, non è più l’unico ad esistere, ma credo che sia ancora l’unico che offra il servizio con semplicità.

Grazie alle API di Google Maps è possibile creare un servizio geo-referenziato senza grosse difficoltà e senza grossi limiti, se non quelli legati alla nostra fantasia e alle nostre capacità.

Creiamo insieme un applicazione “hello world” che sia in grado di visualizzare un punto avente delle coordinate geografiche specifiche.

Prima di ogni cosa, stabiliamo cosa sono le coordinate geografiche.

Le coordinate geografiche servono ad identificare la posizione di un punto sulla superficie terrestre. Sono la latitudine (distanza angolare dall’equatore) la longitudine (distanza angolare lungo il parallelo del luogo da un arbitrario meridiano di riferimento). Le latitudini e le longitudini sono espresse in gradi, minuti e secondi. Attualmente è usato il meridiano di riferimento è quello di Greenwich che passa per l’omonimo osservatorio.

In realtà, utilizzare una coppia di coordinate per indicare un punto su di una mappa è un operazione non molto comoda per noi comuni mortali, per cui tra le API di Google Maps abbiamo una funzione che, dato un indirizzo, da la coppia di coordinate.

La prima cosa da fare, per usufruire delle API di Google Maps è quella di attivare una API Key, che è un codice gratuito che ci viene fornito in base al percorso operativo del nostro documento HTML.

Fatto questo, la prima riga di codice da aggiungere al nostro documento è quella che permettere di caricare le API vere e proprie:

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=[API-KEY]" type="text/javascript"></script>

Fatto questo nella nostra pagina abbiamo a disposizione tutte le funzionalità per creare una mappa. La mappa sarà caricata all’interno di un contenitore qualsiasi che identificheremo con un ID.

<table border="0"> <tbody> <tr> <td id="gmaps"> </td> </tr> </tbody> </table>

Ed ovviamente le dimensioni di questi contenitori potranno essere manipolate con un regola all’interno di un foglio di stile (CSS).

#gmaps { width: 500px; height: 300px; }

Una volta creata l’infrastruttura, possiamo creare la nostra prima applicazione di geo-referenziazione.

<script src="http://maps.google.com/maps?file=api&v=2&key=[API-KEY]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById('gmaps')); map.setCenter(new GLatLng(44.8333, 11.5833), 10); map.openInfoWindow(map.getCenter(), document.createTextNode('DarCas(.net) Sandbox On Air')); map.addOverlay(new GMarker(new GLatLng(44.8333, 11.5833))); } } //]]></script>

In questo esempio, date una coppia di coordinate (che in questo caso corrispondono al luogo dove viene erogato questo sito, ndr.), centro la mappa sul luogo e lo segnalo con un “marker”.

Potremmo però fare la stessa cosa utilizzando un indirizzo, modificando lievemente lo script.

<script src="http://maps.google.com/maps?file=api&v=2&key=[API-KEY]" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function address2point (address) { var map = new GMap2(document.getElementById('gmaps')); var geocoder = new GClientGeocoder(); geocoder.getLatLng ( address, function (point) { if (!point) alert('Indirizzo non trovato!'); else { map.setCenter(point, 10); map.openInfoWindow(map.getCenter(), document.createTextNode('DarCas(.net) Sandbox On Air')); map.addOverlay(new GMarker(point)); } } ); } function load () { if (GBrowserIsCompatible()) { address2point('ferrara, italia'); } } //]]></script>

Il risultato finale dovrebbe essere lo stesso, ovviamente potrebbe accadere che il sistema non sia in grado di convertire l’indirizzo in coordinate, ma sono casi molto rari.

Grazie ai numerosi esempi messi a disposizione da Google non è difficile spingersi ai limiti delle potenzialità di questo strumento. Anche la guida tecnica è ben fatta anche se avvolte pecca di poca chiarezza.