Cambiare tema a Google Maps

Ho scoperto che ci sono vari modi per cambiare aspetto grafico / tema a Google Maps dentro le nostre web app.

Un primo modo, molto completo, è Mapbox.

Questo servizio ti permette di creare una mappa in maniera interattiva, e poi integrarla nel proprio sito web.

Non ho usato direttamente questo servizio, ma ho visto ottime cose in giro; se avete tempo vi conviene farci un salto.

Se invece volete qualcosa in maniera rapida, potete rifarvi a questo ottimo sito: Snappymaps.

Qui potete sfogliare la galleria, scegliere il tema e copiare la stringa JSON relativa.

Una volta fatto questo, dovete impostare questa stringa tra le opzioni della mappa:

 var mapOptions = {
        center: latlng,
        zoom: 12,
        scrollwheel: false,
        draggable: optDraggable,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{stylers: [{saturation: -100}, {gamma: 1}]}, {elementType: "labels.text.stroke", stylers: [{visibility: "off"}]}, {featureType: "poi.business", elementType: "labels.text", stylers: [{visibility: "off"}]}, {featureType: "poi.business", elementType: "labels.icon", stylers: [{visibility: "off"}]}, {featureType: "poi.place_of_worship", elementType: "labels.text", stylers: [{visibility: "off"}]}, {featureType: "poi.place_of_worship", elementType: "labels.icon", stylers: [{visibility: "off"}]}, {featureType: "road", elementType: "geometry", stylers: [{visibility: "simplified"}]}, {featureType: "water", stylers: [{visibility: "on"}, {saturation: 50}, {gamma: 0}, {hue: "#50a5d1"}]}, {featureType: "administrative.neighborhood", elementType: "labels.text.fill", stylers: [{color: "#333333"}]}, {featureType: "road.local", elementType: "labels.text", stylers: [{weight: 0.5}, {color: "#333333"}]}, {featureType: "transit.station", elementType: "labels.icon", stylers: [{gamma: 1}, {saturation: 50}]}]
    };

Questo è quello che ho scelto su un sito che sto finendo.

Come vedete basta usare il parametro styles e mettere la stringa JSON che fornisce il sito; il resto del codice è lo stesso.

A questo punto, volendo, potete anche sperimentare cambiando qualche valore.

Ciao!!