Google maps platform

Le API di Google maps

Con il termine API (Application Programming Interface) si indicano quelle interfacce di programmazione che vengono rese disponibili dai produttori di software (in questo caso Google) e che gli sviluppatori possono utilizzare per ampliare le funzionalità di programmi, applicazioni e piattaforme di diversi generi.

georeferenziati o integrare le mappe all’interno di applicazioni mobile, Google mette a disposizione le proprie API di Google Maps a chiunque ne richieda l’utilizzo.

Se all’inizio la concessione era gratuita e automatica, a partire dal 22 giugno 2016 le regole per l’utilizzo di queste API sono cambiate e, per il loro impiego, si è reso necessario ottenere una chiave di autenticazione, che consente di continuare a visualizzare correttamente le Mappe di Google. Infine dal 16 luglio 2018 sono state apportate delle modifiche anche ai prezzi, rendendo obbligatorio attivare la fatturazione con carta di credito alla quale associare una chiave API valida per tutti i progetti. Una volta ottenuta la chiave è sufficiente inserire lo script nel proprio codice per avere accesso al servizio e poter personalizzare la propria mappa.

Inizializzazione della mappa

La visualizzazione della mappa su una pagina web necessita di riservare una collocazione all’interno del proprio codice. Generalmente è identificata da un elemento

<div id=“mappa”> al quale si associano due opzioni obbligatorie per ogni mappa: il centro di partenza dato da coordinate specifiche e il valore zoom della mappa.

Nel caso di questo progetto il centro è dato dalle coordinate della città di Sarzana, mentre lo zoom è impostato per visualizzare l’intera regione della Lunigiana.

<script async defer src=”https://maps.googleapis.com/maps/api/ js?key=YOUR_API_KEY&callback=initMap” type=”text/javascript”> </script>

Lo stile della mappa

Lo stile della mappa definisce il tema e tutti quegli elementi che possono comparire all’interno di una mappa di Google. Se non viene specificato, lo stile risulterà quello standard di Google Maps, altrimenti se si volesse personalizzarlo sarebbe sufficiente inserire la proprietà styles nella variabile di inizializzazione (nell’esempio precedente in var map).

Questi elementi (features) possono essere divisi per categorie:

 elementi amministrativi (administrative): sono quelle etichette che mostrano sulla mappa le aree amministrative come gli stati, le regioni o le province.

 elementi paesaggistici (landscape): sono le caratteristiche che riportano la copertura del suolo (landcover), le montagne, i parchi naturali e altre caratteristiche naturali.

 punti d’interesse (poi): comprendono tutti quegli indicatori di elementi artificiali come chiese, scuole, ospedali o edifici in genere che hanno un qualche valore di interesse.

 Strade (road): strade, autostrade, sentieri percorribili su ruote

 linee di comunicazione (transit): sono quegli elementi che riportano i trasporti pubblici, come linee e stazioni ferroviarie, stazioni degli autobus o aeroporti

var map = new google.maps.Map(document.getElementById(‘mappa’), {

center: {lat: 44.112518, lng: 9.959700}, zoom: 12;

styles: stile della mappa; });

 acque (water): selezionano ogni raffigurazione di acque (mari, laghi, fiumi etc) Anche se è possibile personalizzare la propria mappa manualmente inserendo per ogni feature la descrizione dello stile, è tuttavia consigliabile sfruttare lo Styling Wizard di Maps Platform, che trasforma automaticamente in un codice Json, tutte le personalizzazioni grafiche volute, senza dover necessariamente saper programmare.

Gli indicatori

L’inserimento di un indicatore (marker) su Google Maps prevede questa formula base:

Le due classi fondamentali senza le quali l’indicatore non può essere visualizzato sono

map e position.

Map indica su quale mappa si vuole inserire l’elemento, ossia la variabile inizializzata precedentemente var map (il problema di omonimia non sussiste in quanto una è una proprietà e l’altra una variabile).

Qualora non si sia specificata in fase di inizializzazione la mappa di destinazione, l’inserimento può avvenire anche con il comando .setMap(mappa). Grazie a questo metodo è più semplice e flessibile organizzare l’aggiunta e l’eventuale eliminazione degli indicatori; infatti se si ha un gran numero di markers da visualizzare, è preferibile non indicare il valore in fase di inizializzazione, ma inserire i marcatori in un array e

var marker = new google.maps.marker({ position: coordinate geografiche, map: nome della mappa,

title: nome del luogo, icon: immagine dell’icona, label: etichetta dell’icona });

utilizzare questo metodo collegato ad un ciclo for che per ogni elemento imposta la proprietà.

Al contrario il metodo per eliminare un indicatore dalla mappa, consiste nel fornire un parametro null al comando di inserimento:

marker.setMap(null).

Position indica le coordinate geografiche dove apparirà l’indicatore sulla mappa. Queste possono essere inizializzate in tre maniere:

1. tra parentesi graffe:

var posizione_Sarzana = {lat: 44.112518,lng: 9.959700};

2. tramite il metodo .LatLng di Google dove il primo valore riporta la latitudine e il secondo la longitudine:

var posizione_Sarzana = new google.maps.LatLng(44.112518, 9.959700);

3. come nel caso della variabile mappa, utilizzando il metodo .setPosition()

In secondo piano ci sono le classi title, label e icon.

 title identifica grazie ad una stringa il nome dell’indicatore come tooltip, ossia come riquadro informativo che apparirà passando il mouse sopra l’icona.

 label mostra una stringa che comparirà direttamente sopra l’indicatore nella mappa.

function inserisciIndicatori (arrayDegliIndicatori, mappa) { for (var i = 0; i < arrayDegliIndicatori.length; i++) {

arrayDegliIndicatori[i].setMap(mappa); }

La stringa è personalizzabile anche per dimensioni, colore e tipo carattere.

 icon mostra l’icona del marker, che di base è impostata su quella di Google Maps. L’icona può contenere diverse proprietà come le dimensioni, il punto di ancoraggio, la posizione del label e l’url dell’immagine di riferimento.

Le InfoWindow

Una InfoWindow è costituita da un insieme di informazioni grafiche o testuali che appare in una finestra popup in un punto determinato della mappa. La finestra è composta da un’area dove si inserisce il contenuto dei dati e da una freccia che punta sulle coordinate volute. Generalmente per associare la posizione e le caratteristiche ad una infoWindow, la si associa ad un indicatore (marker), anche se è possibile generare una finestra in qualunque altra destinazione.

Per inizializzare una infowindow bisogna richiamarne il metodo:

e per far sì che compaia o scompaia si utilizzano i metodi open() e close() collegati all’evento:

var infowindow = new google.maps.InfoWindow({ content: contenuto della finestra;

});

indicatore.addListener(‘click’, function() { infowindow.open(mappa, indicatore); });

var simbolo ={

path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW };

Le linee, i poligoni, i cerchi e i rettangoli

Così come l’indicatore rappresenta un punto della mappa è possibile anche con più indicatori collegare diversi punti per formare segmenti o forme geometriche. Esistono quattro classi create da Google per la creazione di queste figure composte: Polyline,

Polygon, Rectangle e Circle.

I segmenti (polylines) e i poligoni (polygons) sono formati da un path, ossia un vettore contenente tante coordinate quanti sono i punti che compongono la figura.

Nel caso si tratti di un segmento semplice i punti del percorso saranno due, che potranno essere aumentati se si volesse creare un segmento composto da più linee. I poligoni vengono definiti in maniera analoga, con la differenza che il primo e l’ultimo punto del

path sono uniti per formare una figura geometrica chiusa.

Nel segmento è anche possibile aggiungere un simbolo in qualunque posizione. Per ottenere questo risultato si utilizza la proprietà icons di Polyline nella quale si indica il simbolo da inserire. Conviene generalmente inizializzare il simbolo in precedenza e utilizzarlo come variabile da collocare successivamente. La posizione del simbolo si imposta con la proprietà offset espressa in percentuale; se questa proprietà non viene definita il simbolo di default sarà posizionato alla fine del segmento (equivalente di

offset: 100%). Per disegnare il simbolo si utilizza il linguaggio SVG, ma Google mette a disposizione dei simboli predefiniti come le frecce e i cerchi con la classe

Il rettangolo e il cerchio sono invece definiti diversamente. Per il rettangolo si utilizzano delle coordinate assolute indicando i limiti per ciascun punto cardinale. Utilizzando il costruttore LatLngBounds si impostano le coordinate latitudinari per il nord e il sud e

//crea un percorso che parte da Sarzana e arriva a Carrara passando per Pisa e Luni con una freccia in mezzo

var percorso = [ {lat: 44.112518, lng: 9.959700}, // Sarzana {lat: 43.7068074, lng: 10.3603587}, // Pisa {lat: 44.0596534, lng: 10.0027959}, // Luni {lat: 44.0640692, lng: 10.0334607} // Carrara ];

var segmento= new google.maps.Polyline({ path: percorso,

icons: [{

icon: simbolo, //una freccia chiusa offset: ‘50%’ // a metà percorso }]

});

//crea un quadrilatero che ha come vertici le quattro città var poligono= new google.maps.Polygon({

paths: percorso });

//crea un cerchio con centro a Sarzana e 1 km di raggio var cityCircle = new google.maps.Circle({

center: {lat: 44.112518, lng: 9.959700}, radius: 1000

});

quelle longitudinali per l’est e l’ovest.

Per il cerchio invece le proprietà utilizzate sono il centro (center), inserito come coordinate geografiche e il raggio (radius) inserito come un numero che riporta i metri del cerchio sulla mappa.

//crea un quadrilatero che ha come limiti le quattro coordinate var rectangle = new google.maps.Rectangle({

bounds: { north: 43.7068074, south: 44.0596534, east: 9.959700, west: 10.3603587 } });