Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Google Maps: le nuove API v.3

di: Filippo Buratti 11 Gennaio 2010

Anche se la fase di test e sviluppo non è ancora terminata, è possibile utilizzare la versione 3 delle Api di Google Maps (documentazione e reference) già da maggio 2009, data del loro annuncio: nonostante la somiglianza con la versione precedente (V.2), le nuove API beneficiano di un codice totalmente riscritto dagli sviluppatori di Mountain View. Vediamo in sintesi le principali novità.

La differenza fondamentale è che l'API key non serve più, quindi non è necessario richiedere una nuova key per ogni dominio in cui si vuole includere una mappa.
Sono state eliminate tutte le variabili globali della vecchia versione adottando un nuovo namespace (google.maps). Inoltre, grazie alla nuova architettura MVC, il codice è ancora più modulare e "object oriented", con l'utilizzo di comodi oggetti messi a disposizione dalle API.
Dal punto di vista dell'ottimizzazione i tempi di caricamento della mappa sono stati ridotti grazie al minor peso (circa 35 kb) del JavaScript; inoltre è stato incorporato il sistema delle "static maps" per ridurre la percezione della latenza di caricamento.
Un ottimo lavoro è stato fatto per migliorare la compatibilità con i browser di dispositivi mobili e smartphone (iPhone e Android in particolare).
L'interfaccia di controllo della mappa è attivata automaticamente: con le nuove API non c'è bisogno di aggiungere i controlli di zoom o di tipo di mappa.

Nelle prossime pagine analizziamo alcune delle modalità di impiego più comuni: creazione della mappa, inserimento di segnaposti e suggerimenti testuali, geocoding e ricerca degli indirizzi delle località, calcolo di percorsi automobilistici o pedonali.

Creare una mappa

Tanto per cominciare, è necessario includere nel tag head della pagina lo script delle API di Google Maps. Da notare in querystring nell'indirizzo dello script la mancanza dell'API key e la presenza del parametro sensor, utilizzato dai dispositivi che dispongono di un gps per identificare la posizione attuale dell'utente. Volendo " localizzare la mappa", è possibile settare la lingua preferita in una variabile aggiuntiva language.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=it"></script>

Fatto questo possiamo analizzare i metodi delle API per costruire la mappa e scrivere un po' di codice Javascript.

Per inizializzare la mappa abbiamo bisogno innanzitutto di chiamare il costruttore della classe Map (google.maps.Map) che accetta due argomenti. Il primo è un riferimento a un elemento HTML in cui si desidera la mappa da inserire (spesso <div id="map">), il secondo è un oggetto contenente un insieme di proprietà:

Proprietà	Descrizione
center	fissa il centro della mappa in base alle coordinate inserite nell'oggetto `google.maps.LatLng`
zoom	un intero che definisce il livello iniziale di zoom della mappa
mapTypeId	definisce il tipo di mappa tra `HYBRID`, `ROADMAP`, `SATELLITE` e `TERRAIN`

Tra le altre numerose opzioni disponibili sono particolarmente utili quelle che consentono di personalizzare i vari controlli della mappa:

Opzione	Descrizione
disableDefaultUI	booleano, valore di default `false`, consente di nascondere completamente i controlli della mappa
mapTypeControl, navigationControl, scaleControl, etc.	Questi semplici strumenti sono ampiamente documentati nella reference ufficiale delle nuove API.