CREARE MAPPE PERSONALIZZATE CON GOOGLE MAPS

09/10/2016

Google Maps è uno strumento ormai indispensabile per comunicare efficacemente posti e percorsi. Una attività (ad esempio un ristorante) che voglia indicare agli utenti la propria posizione può avvalersi di queste mappe includendole nel proprio sito web. Mappe statiche, immagini, o peggio ancora semplici indicazioni testuali non sono proprio più ammesse! Gli utenti si aspettano di trovare Google Maps e tutto quello che ne deriva ossia la possibilità di condividere il luogo, esplorare i dintorni e calcolare distanze e percorsi.

Inserire una mappa Google Maps sul proprio sito web è abbastanza semplice ma l'effetto non sempre è quello desiderato: la mappa di default è ok, indica certamente la posizione, ma i colori potrebbero non essere nello stile complessivo del sito, magari vorremmo togliere informazioni superflue quali nomi di altri posti non attinenti al contesto, nomi dei parchi, in generale semplificare la mappa e focalizzare l'attenzione su quello che vogliamo indicare.

Utilizzando le Google Maps API v3 è possibile personalizzare la mappa come più si desidera, integrandola con lo stile complessivo del sito. Ad esempio è possibile:

Ecco alcuni esempi:

biz

maps1

Creazione del layout base

Innanzitutto occorre procurarsi una API Key direttamente dal Google Developer center. La chiave ci permetterà di accedere alle funzionalità extra.

Creiamo una pagina HTML di esempio ed includiamo le Google Map API direttamente nell'head. In più creiamo un div contenente la nostra mappa, larghezza e altezza fluida (100%):

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
   <div id="maptest" style="width:100%;height:100%;"></div>
</body>
</html>

La pagina non mostra ancora alcuna mappa, dobbiamo crearla associando al div il codice Javascript opportuno. Definiamo per ora il minimo indispensabile ossia posizione (latitudine e longitudine) e livello di zoom:

<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap"></script>
</head>
<body>
   <div id="maptest" style="width:100%;height:100%;"></div>
   <script>                       
      var mapOptions = {
     scrollwheel: false,
     zoom: 12,
         center: new google.maps.LatLng(43.769562, 11.255814)
      };

      var map = new google.maps.Map(
          document.getElementById('maptest'),
          mapOptions
      );
   </script>
</body>
</html>

Risultato:

screen-shot-2016-10-09-at-4-33-46-pm

Che è esattamente quello che al massimo possiamo ottenere con le opzioni standard. Vediamo ora di cambiare tonalità di colore alla mappa, ad esempio portarla sul blu (tonalità #103050 e livello di saturazione 20):

var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
  }];                   

  var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
  };

  var map = new google.maps.Map(
      document.getElementById('maptest'),
      mapOptions
  );

Risultato:

screen-shot-2016-10-09-at-4-38-35-pm

Aggiungere segnaposto (markers)

Possiamo ora aggiungere uno o più segnaposto sulla mappa, è sufficiente creare quanti oggetti marker desideriamo, specificarne latitudine e longitudine e passarli alla mappa:

var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
  }];                   

  var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
  };

  var map = new google.maps.Map(
      document.getElementById('maptest'),
      mapOptions
  );

  // markers

  var marker1 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769562, 11.265814)
  });

  var marker2 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769662, 11.356814)
  });

  var marker3 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.799362, 11.283814)
  });

Risultato:

screen-shot-2016-10-09-at-4-52-19-pm

Cambiare immagine ai markers

L'icona del marker di default è noiosa. Possiamo utilizzare altre icone o immagini, basta specificare il percorso url alla png o jpeg. Una immagine personalizzata permette ad esempio di creare marker con il logo del nostro sito web, oppure marker che rappresentano posti differenti (ristoranti, stazioni di servizio, aereoporti etc..). Da notare che ogni marker può avere una immagine differente.

var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
  }];                   

  var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
  };

  var map = new google.maps.Map(
      document.getElementById('maptest'),
      mapOptions
  );

  // markers

  var marker1 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769562, 11.265814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker2 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769662, 11.356814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker3 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.799362, 11.283814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

Risultato:

screen-shot-2016-10-15-at-2-14-50-pm

Associare eventi al click di un marker

Possiamo associare un particolare evento quando l'utente clicca su un marker, ad esempio mostrare un popup informativo oppure cambiare pagina o qualsiasi altra cosa. E' sufficiente aggiungere l'evento al marker tramite la funziona addListener()

var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
  }];                   

  var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
  };

  var map = new google.maps.Map(
      document.getElementById('maptest'),
      mapOptions
  );

  // markers

  var marker1 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769562, 11.265814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker2 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769662, 11.356814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker3 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.799362, 11.283814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  // evento

  marker3.addListener('click', function() {
    alert('ok');
  });

Cliccando sul marker 3 comparirà un semplice popup.

Disegnare forme geometriche sulla mappa

Oltre ai marker è possibile aggiungere forme geometriche quali cerchi, rettangoli e poligoni. In particolare i cerchi sono molto utili quando occorre indicare il raggio massimo di azione di qualcosa o qualcuno (consegne a domicilio? antenna trasmettitore GSM?). Per un cerchio occorre specificare colore, raggio (in metri) e il marker da associare al cerchio (il marker identifica il centro). Nel nostro caso associamo il cerchio al marker numero 1, impostiamo il raggio a 5km e colore #ffff000.

var styleArray = [{
featureType: "all",
stylers: [{ "saturation": 20 },{ "hue": "#103050" }]
  }];                   

  var mapOptions = {
scrollwheel: false,
zoom: 12,
center: new google.maps.LatLng(43.769562, 11.255814),
styles: styleArray
  };

  var map = new google.maps.Map(
      document.getElementById('maptest'),
      mapOptions
  );

  // markers

  var marker1 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769562, 11.265814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker2 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.769662, 11.356814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  var marker3 = new google.maps.Marker({
     map: map, 
     position: new google.maps.LatLng(43.799362, 11.283814),
         icon: 'http://www.gianlucaghettini.net/wp-content/uploads/2016/10/pin.png'
  });

  // evento

  marker3.addListener('click', function() {
     alert('ok');
  });

  // cerchio

  var circle = new google.maps.Circle({
 map: map,
     radius: 5000,
 fillColor: '#ffff00',
 strokeWeight: 0,
  });

  circle.bindTo('center', marker1, 'position');  

Risultato:

Il marker 1 identifica il centro del cerchio. Incidentalmente il marker 2 è stato incluso nel cerchio perchè si trova a meno di 5km dal marker 1. screen-shot-2016-10-15-at-2-09-12-pm

Rimuovere elementi superflui

Di default la mappa contiene molti elementi quali nomi di strade, posti, attività commerciali, nomi di parchi, fiumi etc.. E' possibile rimuovere selettivamente questi elementi specificandoli nell'oggetto di stile e impostando la visiblità ad OFF. Ad esempio questo è il codice, per rimuovere nomi di attività commerciali, punti di interesse, fiumi, laghi e strade:

  var styleArray = [
   {
    featureType: "all",
    stylers: [{ "saturation": 20 },{ "hue": "#123456" }]
   },
   {
         featureType: "administrative",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "poi",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "water",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       },{
         featureType: "road",
         elementType: "labels",
         stylers: [
           { visibility: "off" }
         ]
       }
];

Risultato:

screen-shot-2016-10-15-at-2-08-47-pm

Disegnare percorsi sulla mappa

E' possibile passare alla mappa un serie di punti geografici (latitudine, longitudine) e realizzare cosi' un tracciato arbitrario. Va specificato anche il colore, lo spessore della traccia e opacità:

var pathCoords = [
  {lat: 43.769562, lng: 11.265814},
  {lat: 43.769362, lng: 11.303814},
  {lat: 43.729362, lng: 11.253814},
  {lat: 43.739362, lng: 11.223814},
  {lat: 43.749362, lng: 11.203814},
  {lat: 43.759362, lng: 11.273814},
  {lat: 43.769362, lng: 11.243814},
  {lat: 43.799362, lng: 11.283814},
];
var path = new google.maps.Polyline({
  path: pathCoords,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
});

path.setMap(map);

Risultato:

screen-shot-2016-10-15-at-2-41-35-pm

Oltre a cerchi e linee è possibile disegnare qualsiasi altra forma geometrica, aggiungere immagini e marcare bordi. Il sito ufficiale include tutorial ed esempi per trasformare e adattare le mappe in qualsiasi modo possibile!

Vedi la DEMO

Vuoi personalizzare una o più mappe Google Maps per integrarla al meglio nel tuo sito internet? Fammi sapere nei commenti oppure contattami!


Torna alla home

Commenti

35 commenti


sergio (sergiocntr@gmail.com)
il 7 Febbraio 2018 alle 20:17

Complimenti Gianluca. Sito in terre santissimo ( non l ho corretto....è meraviglioso....). ...comunque veramente bello,bella l applicazione cliente,poca pubblicità. Bravo. ( ci sono arrivato cercando info sul pic16f84 per la cronaca)

Rispondi


Gianluca (Admin)
il 7 Febbraio 2018 alle 21:17

grazie! eheh dal pic16f84 al blog alla app.. veramente per vie traverse! :-) Bene sono contento che ti piaccia. Se vuoi lasciami una recensione positiva che ne ho bisogno! Il sito del pic dovrei aggiornarlo, ormai è dal 2004 che è li, dovrei creare qualcosa di simile ma per la famiglia intera dei pic non solo il 16f84

Rispondi


Stefano (stenfal@gmail.com)
il 23 Marzo 2018 alle 10:41

Buongiorno, complimenti per la guida. Avrei un problema, volevo impostare la mappa adattandola alla dimensione della pagina con ma non viene visualizzata.
Se invece do una dimensione, per esempio si. Viene in mente qualche soluzione?

Rispondi


Stefano (stenfal@gmail.com)
il 23 Marzo 2018 alle 10:43

con "width:100%;height:100%;" non funziona, con "width:300px;height:300px;" si

Rispondi


Gianluca (Admin)
il 23 Marzo 2018 alle 10:58
Rispondi


Stefano (stenfal@gmail.com)
il 23 Marzo 2018 alle 11:19

Grazie mille. Adesso tutto ok :)

Rispondi


Luca (applucatorcivia@gmail.com)
il 13 Aprile 2018 alle 11:53

Ciao Gianluca, ho un problema con lo script del cambio colore. Dove devo inserirlo?
grazie mille
un saluto

Rispondi


Gianluca (Admin)
il 13 Aprile 2018 alle 12:05

Ciao Luca, puoi postare il codice

Rispondi


Luca (applucatorcivia@gmail.com)
il 13 Aprile 2018 alle 12:56

risolto

Rispondi


Luca (applucatorcivia@gmail.com)
il 13 Aprile 2018 alle 12:57

Ciao Gianluca,
se volessi inserire lo script all interno del mio sito web ( uso squarespace) c'è qualche passaggio particolare da fare? perche c'è qualcosa che non va

Rispondi


Gianluca (Admin)
il 13 Aprile 2018 alle 15:07

Ho visto che squarespace permette l'aggiunta di blocchi di codice Javascript arbitrari quindi non dovrebbe essere un problema. Però ho visto anche che hanno il loro modo integrato di mostrare punti Google maps quindi dovresti vedere prima se è un problema lato browser o lato loro. Con dev tool di Chrome lo vedi subito

Rispondi


Luca (applucatorcivia@gmail.com)
il 15 Aprile 2018 alle 21:53

ciao come faccio a collegare la funzione apri url con ckick su marker?

grazie mille
ciao

Rispondi


Luca (applucatorcivia@gmail.com)
il 15 Aprile 2018 alle 21:54

grazie mille

Rispondi


Luca (applucatorcivia@gmail.com)
il 17 Aprile 2018 alle 11:08

risolto. Se dovesse servire a quacuno:
// evento

marker3.addListener('click', function() {
window.open("https://www.google.it&#34;);
});

Rispondi


Gianluca (Admin)
il 17 Aprile 2018 alle 12:32

Ciao Luca, per aprire un popup al click sul marker puoi usare il popup google map standard "InfoWindow" che puoi customizzare come vuoi, di default si adatta automaticamente al testo che passi. Puoi anche passare del codice html per customizzare lo stile

[code]
var infowindow = new google.maps.InfoWindow();
[/code]

vedi un esempio qui:
https://developers.google.com/maps/documentation/javascript/infowindows

Rispondi


Luca (applucatorcivia@gmail.com)
il 17 Aprile 2018 alle 13:53

Grazie mille Gianluca! proverò e poi aggiornerò il blog!

Rispondi


Luca (applucatorcivia@gmail.com)
il 17 Aprile 2018 alle 13:57

Ciao Gianluca,

secondo te invece per quanto riguarda l'immagine personalizzata del marker.... posso utilizzare dropbox per salvare l'immagine online?

Luca

Rispondi


Gianluca (Admin)
il 17 Aprile 2018 alle 14:00

Beh, qualsiasi immagine va bene purchè abbia un URL proprio. Se riesci a visualizzare l'immagine semplicemente specificando l'URL sul browser allora puoi usarla sul marker. Credo che dropbox permetta l'uso di URL statici per i contenuti che vuoi pubblicare ma non sono sicuro al 100%. Ma non fai prima a servire l'immagine localmente sul server?

Rispondi


Luca (applucatorcivia@gmail.com)
il 17 Aprile 2018 alle 16:07

Giusto... Perfetto.
Gianluca Grazie mille di tutto l'aiuto! Spero davvero pubblichi nuovi articoli!

Rispondi


kirpi (kirpi@kirpi.it)
il 25 Aprile 2018 alle 23:18

Grazie Gianluca per tutte le informazioni. Un passo indietro che però mi manca: come si comunica a Google un'area arbitraria, anziché un punto di coordinate? Mi spiego con un esempio pubblico: se cerchi su Google "Foorban" trovi, nel riquadro a destra (generato da Google) la mappa

non

dell'indirizzo della società (che non interessa a nessuno) ma della zona (non un semplice cerchio, bada) in cui la società è operativa. Come si ottiene questo risultato, cortesemente? Quando Google ti chiede "dove sei?" come posso passare un'area arbitraria anziché un punto?
Grazie ancora!

Rispondi


Gianluca (Admin)
il 25 Aprile 2018 alle 23:44

Ciao! semplice, quello che ti serve è un POLIGON, ossia una lista di coordinate lat, lon da passare alla libreria che genereranno la tua area colorata in trasparenza (o outline). E' ovvio che l'area la devi definire tu, Google non sa dove opera Foorban. Per altre aree invece non è necessario fornire il poligono, ad esempio se richiedi l'area relativa a "Roma" o "Firenze". Queste "aree" sono già definite internamente da Google e non richiedono il poligono

Ecco un esempio pratico:

[code]
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 24.886, lng: -70.268},
mapTypeId: 'terrain'
});

// Define the LatLng coordinates for the polygon's path.
var triangleCoords = [
{lat: 25.774, lng: -80.190},
{lat: 18.466, lng: -66.118},
{lat: 32.321, lng: -64.757},
{lat: 25.774, lng: -80.190}
];

// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
[/code]

In soldoni è molto simile alla linea outline ma in questo caso definisci un fillColor e un fillOpacity.
Questo è quello che ottieni:

https://google-developers.appspot.com/maps/documentation/javascript/examples/full/polygon-simple

Poco impressionante? Si, perchè ho dato solo tre punti. Ovviamente ne devi dare molti di più per creare la tua regione dettagliata, non c'è altro modo. Ma ripeto, per aree geografiche note (Citta, Paesi, Provincie etc..) è possibile chiedere alla libreria di disegnare l'outline direttamente senza specificare i punti

Rispondi


francesca quadu per assopiu\' srl (amministrazione@assopiu.com)
il 13 Giugno 2018 alle 11:59

buongiorno sig GHettini sono francesca di assopiu' srl
un'agenzia di marketing che ha la seguente necessita'
riadattare le mappe scaricate su my maps alla densita' popolativa
mi spiego: devo distribuire in un determinato quartiere di una citta
oppure definisco io i margini entro i quali voglio distribuire i volantini pubblicitari per un cliente
e' possibile avere immediatamente un numero reale di residenti in quella zona definita?
un software che in automatico collega i margini che vado a impostare al numero di residenti.
( controllo incrociato immediato)

puo' rispondermi tramite mail
amministrazione@assopiu.com
grazie mille

Rispondi


Luigi (luigipedata@live.it)
il 14 Novembre 2018 alle 18:03

Sono sul mio sito wordpress , l'api l'ho creata e quando inserito le prime due parti di codice (inserendo ovviamente l'api creata) poi non compare nulla sul mio sito ...
Anni fa seguii la tua guida e andò tutto liscio ma ora niente :/

Rispondi


Gianluca (Admin)
il 14 Novembre 2018 alle 19:47

Salve Luigi, mi contatti a: gianluca.ghettini@gmail.com

Rispondi


Luigi (luigipedata@live.it)
il 15 Novembre 2018 alle 17:50

lo faccio subito grazie =)

Rispondi


andrea (andrea.puri@gmail.com)
il 11 Gennaio 2019 alle 18:22

ciao, sto provando questa tua utilissima guida con dreamweaver. Dopo aver scritto la prima parte per inserire la mappa nell'html (prima di iniziare a editare il colore, per capirci) mi succede un errore. Se faccio reload la carta viene visualizzata per un attimo, e subito dopo appare la scritta: "Oops! something went wrog. This page didn't load Google Maps correctly . See the Java Script console for technical details"...

Whats wrong???

Rispondi


Gianluca (Admin)
il 12 Gennaio 2019 alle 14:31

Ciao, devi usare una API key valida altrimenti ti mostra quell'errore. Puoi crearla dalla nuova Google API platform; adesso Google richiede una carta di credito valida anche per l'utilizzo free della chiave. Per volumi medio-bassi Google non addebita alcun importo, però vogliono i dati della carta in caso l'utilizzo della API key vada oltre il volume gratuito mensile

Rispondi


Matteo (matteo.sica13@gmail.com)
il 1 Febbraio 2019 alle 18:47

ciao Gianluca io ho un elenco di posizioni di cui già ho cercato l'url su google map, perchè devo individuare esattamente il punto. L'elenco url di google map è in excel come faccio a creare una mappa unica con tutti i link che ho? Grazie mille

Rispondi


Leon (mephjl@gmail.com)
il 20 Settembre 2019 alle 16:34

Ho provato e riprovato, ma non mi funziona. Puoi aiutarmi ?

Rispondi


Gianluca (Admin)
il 26 Settembre 2019 alle 09:24

Certo, mandami una email a info@gianlucaghettini.net

Rispondi


Gianluca (Admin)
il 26 Settembre 2019 alle 09:25

Ciao Matteo, mandami una email a info@gianlucaghettini.net

Rispondi


Daniele (daniele.assiri@gmail.com)
il 22 Agosto 2020 alle 23:28

Come fare per inviare un alert all'utente, se la posizione dell'utente si trova entro una certa distanza da un punto di interesse? Grazie

Rispondi


Gianluca (Admin)
il 18 Ottobre 2020 alle 19:51

Ciao Daniele,
Dovresti sviluppare un app per questo. L'app controllerebbe ad intervalli regolari la posizione dell'utente ed invierebbe l'email se le condizioni di posizione sono soddisfatte.
Una semplice pagina web non può fare tutto ciò, a meno che non intendi inviare l'email semplicemente una volta alla visita della pagina web; in questo caso una combinazione di JavaScript e PHP lato server farebbe al caso tuo

Rispondi


adduci.roberto21092@gmail.com
il 13 Gennaio alle 01:39

Ciao, io vorrei poter creare 4 itinerari con circa 50 tappe così da pianificare i percorsi con partenza e dalla mio magazzino e concludendo dopo aver fatto le 50 tappe, sempre in magazzino. Perché Google Maps non fa creare itinerari con più di 10 tappe.
PS: mi serve fare questa cosa per lavoro.
Mi puoi aiutare? Grazie in anticipo

Rispondi


Gianluca (Admin)
il 15 Gennaio alle 16:42

@adduci.roberto21092@gmail.com Ciao Roberto, puoi impostare al massimo 10 tappe con l'interfaccia Google Maps e 25 tappe con le API Maps. Per creare percorsi con più di 25 tappe andrebbe realizzato un programma ad-hoc che scompone le tappe in blocchi da 25 (aggregandoli a grandi linee per zona geografica) e poi inviando le richieste alle API di Google. Se vuoi contattami a info@gianlucaghettini.net
Ciao!

Rispondi


Il tuo nome o email (Se usi l'email potrai essere notificato delle risposte)
Il tuo messaggio