Google Maps JavaScript API

Ecco il (quasi) triangolo di CNJ!

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.

<!DOCTYPE html>
<html>
<head>
    <title>Basic</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
    }
    #buttonContainer{
        position: fixed;
        top: 10px;
        left: 10px;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="buttonContainer">
        <button onclick="MapExperiments.changeMapType()">Change Map Type</button>
        <button onclick="MapExperiments.moreZoom()">+</button>
        <button onclick="MapExperiments.lessZoom()">-</button>
    </div>
    <script>
    window.MapExperiments = {
        map:null,
        MAP_TYPES:null,
        initMap:function() {

            MapExperiments.MAP_TYPES = [
                google.maps.MapTypeId.SATELLITE,
                google.maps.MapTypeId.TERRAIN,
                google.maps.MapTypeId.ROADMAP,
                google.maps.MapTypeId.HYBRID
            ];

            MapExperiments.map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 43.45302116583494, lng: 12.355504681250075},
                zoom: 6,
                disableDefaultUI:true,
                mapTypeId:google.maps.MapTypeId.SATELLITE
            });
        },
        changeMapType:function(){
            MapExperiments.map.setMapTypeId(MapExperiments.MAP_TYPES[Math.floor(Math.random() * 4)]);
        },
        moreZoom:function(){
            var zoom = MapExperiments.map.getZoom() + 1;
            MapExperiments.map.setZoom(zoom);
        },
        lessZoom:function(){
            var zoom = MapExperiments.map.getZoom() - 1;
            MapExperiments.map.setZoom(zoom);
        }
    };

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=MapExperiments.initMap" async defer></script>
</body>
</html>

La nostra prima mappa

La nostra prima mappa

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 Google Developer Console. 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 Google Charts. 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

<!DOCTYPE html>
<html>
<head>
    <title>Markers</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
    }
    #buttonContainer{
        position: fixed;
        top: 10px;
        left: 10px;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <div id="buttonContainer">
        <button onclick="MapExperiments.addMarkers()">Add Marker</button>
        <button onclick="MapExperiments.removeMarkers()">Remove Marker</button>
    </div>
    <script>

    var MARKERS_DATA = [{
        position: {lat: 43.523302, lng: 13.244851},
        title: "Strazz"
    },{
        position: {lat: 43.8665949, lng: 11.1561196},
        title: "Fabio"
    },{
        position: {lat: 43.88907, lng: 11.09802},
        title: "Andrea"
    },{
        position: {lat: 45.9676902, lng: 12.5666159},
        title: "Giampaolo"
    }];

    window.MapExperiments = {
        map:null,
        markers:[],
        initMap:function() {
            MapExperiments.map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 43.45302116583494, lng: 12.355504681250075},
                zoom: 6,
                disableDefaultUI:true
            });
        },
        addMarkers:function(){
            if(!MapExperiments.markers.length){
                MapExperiments.markers = MARKERS_DATA.map(function(m){
                    return new google.maps.Marker({
                        position: m.position,
                        map: MapExperiments.map,
                        animation: google.maps.Animation.DROP,
                        title: m.title,
                        icon:'http://codingjam.it/wp-content/uploads/2016/03/codingjam-jar-icon.png'
                    })
                });
            }
        },
        removeMarkers:function(){
            if(MapExperiments.markers.length){
                MapExperiments.markers.forEach(function(m){
                    m.setMap(null);
                });

                MapExperiments.markers = [];
            }
        }
    };

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=MapExperiments.initMap"
    async defer></script>
</body>
</html>

Bene, ora sapete dove abita il direttivo di CNJ! ;)

Bene, ora sapete dove abita il direttivo di CNJ! 😉

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.

<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
    window.MapExperiments = {
        map:null,
        initMap:function() {

            MapExperiments.map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 43.45302116583494, lng: 12.355504681250075},
                zoom: 6,
                disableDefaultUI:true
            });

            MapExperiments.map.addListener('click', function() {
                MapExperiments.map.setCenter({lat: 43.45302116583494, lng: 12.355504681250075});
            });

            MapExperiments.map.addListener('center_changed', function() {
                var center = MapExperiments.map.getCenter();
                console.log(center.lat(),center.lng());
            });

        }
    };

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=MapExperiments.initMap"
    async defer></script>
</body>
</html>

In questo esempio ci siamo iscritti agli eventi click e center_changed, il resto degli eventi disponibili li trovate tutti sulla documentazione 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.

<!DOCTYPE html>
<html>
<head>
    <title>Draw</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        height: 100%;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    var COORDINATES = [
        {lat: 43.88907, lng: 11.09802},
        {lat: 43.8665949, lng: 11.1561196},
        {lat: 43.523302, lng: 13.244851},
        {lat: 45.9676902, lng: 12.5666159},
        {lat: 43.88907, lng: 11.09802}
    ];

    window.MapExperiments = {
        map:null,
        line:[],
        initMap:function() {
            MapExperiments.map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: 43.45302116583494, lng: 12.355504681250075},
                zoom: 6,
                disableDefaultUI:true
            });

            var mapPath = new google.maps.Polygon({
                path: COORDINATES,
                strokeColor: '#FF0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });

            mapPath.setMap(MapExperiments.map);
        }
    };

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=MapExperiments.initMap"
    async defer></script>
</body>
</html>

Ecco il (quasi) triangolo di CNJ!

Ecco il (quasi) triangolo di CNJ!

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 Google Translate e Google Drive.
Tutto quello che avete visto fino ad ora è disponibile sub github, sia in forma di demo che come repository dove potete dare un’occhiata al codice. Alla prossima!

Francesco Strazzullo

Faccio il Front-end developer per e-xtrategy dove mi occupo di applicazioni AngularJS e mobile. In passato ho lavorato principalmente con applicazioni con stack Spring+Hibernate+JSF 2.X+Primefaces. Sono tra i collaboratori del progetto Primefaces Extensions: suite di componenti aggiuntivi ufficialmente riconosciuta da Primefaces. Sono anche uno dei fondatori del progetto MaterialPrime: una libreria JSF che segue le direttive del Material Design di Google.