Good2Know » Guida API di Google

Guida alle API di Google Maps, come ottenere le coordinate conoscendo solo l’indirizzo

Filippo Matteo Riggio — Mon, 25 May 2009 06:02:48 +0000

Va avanti la guida sulle API di Google Maps, dopo i due capitoli precedenti, vedremo finalmente come ottenere le coordinate(longitudine e latitudine), connettendoci ai server di Google.

Questo processo è il Geocoding ed è una delle funzionalità che utilizzerete più spesso.

I metodi sono due : uno un po’ più “grezzo”e a tentoni, che preferirei evitare, anche se il più rapido e meno preciso, oppure sempre attraverso le API.
Il metodo “grezzo” consiste nel cercare un indirizzo tramite Google Maps, cliccare su Link e poi copiare la stringa da includere nell’ HTML.
La stringa, simile a questa :

marginheight=”0″ marginwidth=”0″ src=”http://maps.google.it/maps?f=q&source=s_q&hl=it∓geocode=&q=milano&sll=41.442726,12.392578&sspn=19.808149,38.671875&a
mp;ie=UTF8&ll=45.520782,9.221649&spn=0.341602,0.700378&t=h&a
mp;z=11&iwloc=A&output=embed”>Visualizzazione ingrandita della mappa

All’interno dell’attributo src del tag iframe, verso la fine, si può notare la stringa ll=45.520782,9.221649 , queste sono le coordinate del luogo, tuttavia bisognerà metterle a punto in quanto molto imprecise.

Il metodo che utilizza le API per ottenere le coordinate utilizza la classe GClientGeocoder e la funzione getLatLng(indirizzo, funzione di ritorno in caso di errore).

La classe GClientGeocoder gestisce una connessione con il server di Google.

La funzione getLanLng vuole un indirizzo del tipo “via dei pioppi, 20, 37000,Milano”, e una funzione per gestire il punto trovato.

Facciamo un esempio:

Function initialize(){
if (GBrowserIsCompatible()) {
var address=“Via dei pioppi, 20, Milano”;
var map = new GMap2(document.getElementById(“map_canvas”));
var geocoder = new GClientGeocoder();
geocoder.getLatLng(address,function(point) {
if (point) {
map.setCenter(point, 13);
} else {
alert(address + Non trovato o duplicato”);
}
});
map.setUIToDefault();
}
}

Viene istanziata una nuova classe GClientGeocoder() nella variabile geocoder.

Ora passiamo alla funzione getLatLng() l’indirizzo e la funzione per gestire il punto ottenuto.
Se esiste il punto viene centrata la mappa su di esso, altrimenti si stampa un errore.
Come ultima istruzione settiamo l’interfaccia grafica di default.

Per vedere un altro esempio clicca qui .

Guida alle API di Google Maps – Capitolo 3 – Come ottenere le coordinate

Come ottenere le coordinate

Guida alle API di Google Maps, iniziamo a creare le mappe

Filippo Matteo Riggio — Wed, 13 May 2009 13:56:35 +0000

Dopo il primo appuntamento con l’ introduzione alle Google Maps, eccovi il secondo capitolo sulle API di Google Maps in cui parleremo di come creare una mappa.

Come sempre in fondo alla pagina trovate il pdf scaricabile.

Iniziamo!

Per avere una visione migliore facciamo un esempio.

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Google Maps JavaScript API Example

Questa è una pagina html che contiene la mappa di Palo Alto in California ed è grande 500 pixel per 300 pixel.

Per prima cosa abbiamo incluso un file javascript esterno che ci fornirà tutte le funzioni che potremo utilizzare.

Nell’URL (l’indirizzo a cui si riferisce il file) dovremo inserire la nostra API Key in questa parte qui : key=abcdefg , dove al posto di abcdefg inseriremo la API Key ottenuta in precedenza.

Poi bisogna creare la funzione initialize() . Successivamente, nel tag body inseriremo gli eventi onLoad=”initialize()” e onUnload=”GUnload()”.

Function initialize(){

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

}

La funzione GBrowserIsCompatible() restituisce true se il browser del client(colui che visita il sito) è compatibile con le API di Google Maps perché trattandosi di javascript potrebbe avere problemi di visualizzazione con i browser meno recenti o di chi ha javascript disattivato.

La variabile map istanzia una nuova classe GMap2(), creando una nuova mappa all’interno del tag div specificato attraverso l’attributo id.

La variabile ll istanzia una nuova classe GLatLng(latitudine,longitudine), a cui dovremo passare la variabile di latitudine e longitudine; questa nuova classe contiene tutti i metodi e le proprietà relativi alle coordinate terrestri.

Adesso entra la programmazione orientata agli oggetti, chiamando la funzione associata all’oggetto, in questo caso la variabile map.

Attraverso la funzione set Center(ll,zoom) è possibile centrare la mappa sulle coordinate e zoomare quanto si vuole, scegliendo un valore tra 1 e 20.

L’ultima funzione setUIToDefault() associa alla tua Google Map l’interfaccia grafica standard, quella che si visualizza anche sul sito di Google Maps.

Finisce qui il capitolo su come creare la mappa.

Tutti vi chiederete, si ho la mappa, e le coordinate come le trovo? Questo sarà l’argomento del prossimo capitolo. Alla prossima !

Di seguito il pdf scaricabile di questo capitolo.

Guida alle API di Google Maps – Capitolo 2 – Iniziamo a creare le mappe

Creare la mappa

Guida alle API di Google Maps, introduzione

Filippo Matteo Riggio — Wed, 13 May 2009 13:50:16 +0000

GUIDA alle API di Google Maps.

Visto che molti web developers italiani non riescono a trovare in giro una guida sulle API di Google Maps in italiano di facile consultazione ho deciso di scriverne una io.

Sia come appunti personali ma anche per libera consultazione da parte di chi si vuole cimentare con questo argomento di programmazione.

In questa introduzione, spiego cosa sono le API.

I capitoli sono scaricabili in formato PDF, in fondo alla pagina.

Buona lettura!

Benvenuti nella guida alle API di Google Maps.
Questa guida nasce come riferimento ai web master italiani che trovano parecchia difficoltà nella documentazione fornita da Google Code sulle proprie API.

Con le API di Google Maps potrai includere nelle tue pagine web, mappe personalizzate.

Ma per poter iniziare a usare le API di Google Maps dovresti conoscere almeno un po’ di javascript e di programmazione ad oggetti.

Se non sei molto pratico di javascript e programmazione ad oggetti guarda le guide qui sotto.

Guida Javascript

Guida alla programmazione ad oggetti

Dopo aver appreso il minimo indispensabile da queste due guide iniziamo a entrare nel mondo delle API.

Che cosa è una API ?

L’acronimo API sta per Application Programming Interface, cioe’ interfaccia di programmazione di un applicazione, potremmo programmare, attraverso delle funzioni e dei comandi, un’applicazione, in questo caso Google Maps.
Che cosa è una API Key?

Per poter accedere ai servizi di Google Maps però dobbiamo ottenere un’ API key, cioè una chiave che ci permetta di poter accedere al servizio, univocamente per ogni dominio.
L’API key non può essere utilizzata per due diversi domini.
Che cosa è un Geocode?

Un Geocode è la conversione di un indirizzo reale (“Via dei Pioppi, 26, Milano, Italia”) in coordinate terrestri, quali longitudine e latitudine, ad esempio 52,652035 e 35,69875.

Google impone che le proprie coordinate siano utilizzate solo su Google Maps e non per altri scopi. E’ possibile visualizzare un Geocode solo su Google Maps.

Il Geocode è importante, perché saranno le coordinate che potremmo imporre noi alla nostra mappa attraverso le API, ma Google ne limita l’utilizzo, adesso vedremo come.

Limitazioni all’uso dell’ API Key?

Google offre gratuitamente il suo servizio, tuttavia impone delle semplici regole sull’utilizzo delle API.

Per ottenere una API Key bisogna avere un account Google.

L’ API Key è univoca per ogni sito, e non può essere generata casualmente.
Non c’è un limite di visite nella pagina con la mappa generata con le API.
C’è un limite di 15000 generazioni di geocode nella pagina con la mappa generata con le API.
Non si può inserire pubblicità sulla mappa.
La tua mappa non deve essere usata per scopi commerciali alcuni.
Non si deve oscurare il logo di Google.

Ottenere una API key

Andiamo a quest’ indirizzo oppure clicchiamo su Sign Up.
Dopo aver letto i termini e condizioni d’uso, spuntiamo la casella, inseriamo il nostro dominio (http://www.miosito.it) e clicchiamo su Generate API Key.

Verrà generata una stringa di circa 50 caratteri, salviamola su un file txt.

Attenzione: non perdete l’API Key che viene generata,è importante!!

Bene avete appreso le nozioni di base sulle API key, una leggera infarinatura prima di passare al capitolo successivo, dove entrerà in gioco la programmazione .

Di seguito il pdf scaricabile.

Guida alle API di Google Maps – Capitolo 1 – Introduzione

Introduzione