Google Maps JavaScript API

Google Maps è personalmente uno dei servizi Google che utilizzo di più al pari di Gmail e Hangouts. Proprio il successo di questo servizio ha fatto sì che le mappe di BigG in versione embedded siano apparse in una marea di siti e applicazioni web. Se avete bisogno di un’interazione maggiore tra la vostra webapp e le mappe, Google mette a disposizione una API Javascript molto potente. In questo post vi illustrerò, tramite alcuni esempi le principali funzionalità di queste API.

Inizializzazione e prime interazioni

Iniziamo subito come creare una semplice mappa per poi interagire con le sue proprietà. In particolare andremo a cambiare il tipo di mappa e lo zoom.

    
    
    
    


    

    

        Change Map Type
        +
        -
    
    
    

Per policy tutte le API Javascript di Google devono sempre essere scaricate dai loro server, non potete quindi includerle nel pacchetto minificato della vostra applicazione. Notiamo inoltre i due parametri in querystring. Il primo, key, è la chiave identificativa del vostro progetto da creare sulla vostra . L’utilizzo di queste API è infatti gratuito fino al superamento di 25.000 caricamenti di mappe al giorno per 90 giorni consecutivi, dopodiché si applica una piccola fee ogni 1000 visualizzazioni aggiuntive giornaliere. Il secondo parametro, chiamato callback, invece è una funzione javascript da invocare quando lo script Google è stato caricato. Questa tecnica è una prassi di altre API Google come ad esempio i . Per creare una mappa dobbiamo instanziare un oggetto google.maps.Map. Tra i parametri accettati notiamo disableDefaultUI che ci permette di disabilitare completamente la UI originale Google per poterla sostituire con una nostra grafica custom, come nell’esempio.

Markers

Quando si parla di mappe una delle features che vengono immediatamente in mente è la possibilità di aggiungere dei markers. Grazie a Google Maps questa operazione è davvero semplice come possiamo vedere dal prossimo esempio

    
    
    
    


    

    

        Add Marker
        Remove Marker
    
    
    

Per creare un marker basta quindi creare un oggetto di tipo google.maps.Marker al quale potete passare (oltre la posizione) anche un titolo e un’immagine da utilizzare al posto del classico marker Google. In questo caso abbiamo utilizzato il nostro fantastico logo! 😉

Eventi

Altra funzionalità indispensabile è quella di rispondere agli input degli utenti. Nel prossimo esempio vediamo come iscriversi agli eventi tramite il metodo addListener.

In questo esempio ci siamo iscritti agli eventi click e center_changed, il resto degli eventi disponibili li trovate tutti sulla ufficiale.

Linee e poligoni

L’ultima feature che vedremo in questo primo post è la possibilità di aggiungere linee e poligoni alle vostre mappe. Anche in questo caso il codice sarà di una semplicità estrema e ci basterà utilizzare un oggetto di tipo google.maps.Polygon per un poligono, oppure google.maps.Polyline per ottenere una linea spezzata.

Conclusioni

Questo post non vuole ovviamente essere esaustivo sull’argomento. Le API di Google Maps permettono di fare moltissime cose anche davvero complesse. Inoltre vi consiglio di dare uno sguardo ad altre API Google: oltre alle già citate Google Charts, l’azienda di Mountain View mette a disposizione la quasi totalità dei suoi servizi quali e .
Tutto quello che avete visto fino ad ora è disponibile sub github, sia in forma di che come dove potete dare un’occhiata al codice. Alla prossima!