Le API di Google Maps ci consentono una personalizzazione delle mappe di Google e questo, nello sviluppo web per aziende, è molto importante perché normalmente le aziende utilizzano una loro palette colori personalizzata. Se abbiamo quindi dei colori personalizzati da inserire su un sito, possiamo customizzare la mappa con i colori specifici. Quindi passiamo all”azione e vediamo come usare il javascript per la personalizzazione.

Innanzitutto importiamo la libreria per usare le API con la nostra api key registrata a questo link:

<script type='text/javascript' src='https://maps.googleapis.com/maps/api/js?key=<vostra_api_key>'></script>

In seguito possiamo creare una variabile che conterrà un json con i nostri stili della mappa;

var color = "#eb6a21"; //colore primario dell''azienda (in questo caso arancione), da questo colore lo script otterrà automaticamente, gli altri colori per vie secondarie, parchi e altro sulla mappa

var saturation = 100;

var styles = [
   {"featureType": "landscape","stylers": [{"hue": "#000"},{"saturation": -100},{"lightness": 40},{"gamma": 1}]},
   {"featureType": "road.highway","stylers": [{"hue": color},{"saturation": saturation},{"lightness": 20},{"gamma": 1}]},
   {"featureType": "road.arterial","stylers": [{"hue": color},{"saturation": saturation},{"lightness": 20},{"gamma": 1}]},
   {"featureType": "road.local","stylers": [{"hue": color},{"saturation": saturation},{"lightness": 50},{"gamma": 1}]},
   {"featureType": "water","stylers": [{"hue": "#000"},{"saturation": -100},{"lightness": 15},{"gamma": 1}]},
   {"featureType": "poi","stylers": [{"hue": "#000"},{"saturation": -100},{"lightness": 25},{"gamma": 1}]}
];

Ora possiamo istanziare una mappa e personalizzarla con il seguente codice:

var mapOptions = {
   zoom: 16,
   center: new google.maps.LatLng(42.363224, 13.395324),//centriamo la mappa
   styles: styles //qui diciamo tra le opzioni della mappa che dobbiamo utilizzare gli stili specificati
};
var map = new google.maps.Map(document.getElementById(''map''), mapOptions);//creiamo la mappa
var myLatLng = new google.maps.LatLng(42.355118, 13.388854);//impostiamo una posizione
var beachMarker = new google.maps.Marker({
   position: myLatLng,
   map: map
});

A questo punto se abbiamo fatto bene i passaggi fin qui elencati vedremo la nostra mappa personalizzata.