This is in the Maps documentation itself:
link
See a simple example, with examples of color change, and with the names of roads removed (just an example, you can customize the whole map by removing or styling each part):
function initialize() {
var styles = [{
stylers: [{
hue: "#00ffe6"
}, {
saturation: -20
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 100
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
var styledMap = new google.maps.StyledMapType(styles, {
name: "Styled Map"
});
var mapOptions = {
zoom: 18,
center: new google.maps.LatLng(-23.55, -46.633333),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
See working at CODEPEN .
Online customization tool:
To avoid creating the configuration manually, you have a very cool tool at this address to automate and preview settings:
link
Just choose items, set as you want. To configure multiple items separately, simply add a new item to the right bar after customizing the current item. Each added item generates an entry in the configuration object.