Customizing google maps landscape.man_made color and keep the shading?

Question

I'm trying to build a customized google map using API v3.exp. I want to customize the color of the buildings too but it seems that if I change the color of landscape.man_made, I 'm losing the beautiful shading effect in the buildings (different tones). See attached pics.

Default color Custom color

The json for StyledMapType object is

var mapStyle = [{
  "featureType": "landscape.man_made",
  "elementType": "geometry.fill",
  "stylers": [{
     "color": "#808080"
  }]
}];

Is there a possibility to change the buildings color and keep the shading effect?

Answer 1

Yes. There is such a possibility. Simply use hue and saturation

{ stylers: [ { hue: "#00ffe6" }, { saturation: -20 } ] }

The more detailed example can be found here https://developers.google.com/maps/documentation/javascript/styling

Below is my example of the styled google map and the full code

var map;
function initialize() {
    var lat="53.89076";
    var long="27.57156";
    var myLatLng=new google.maps.LatLng(lat, long);
    var mapOptions = {
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLatLng,
        styles: [
            { "stylers": [ { "hue": "#3d535b" }, { "saturation": -20 } ] },
            { "elementType": "labels.text.fill", "stylers": [ { "color": "#3d535b" } ] },
            { "elementType": "labels.text.stroke", "stylers": [ { "color": "##e8eeef" } ] },
            { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#e8eeef" } ] },
            { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#b1bcbf" } ] },
            { "featureType": "water", "stylers": [ { "color": "#adb9bc" } ] },
            { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#3d535b" } ] },
            { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "color": "#d1d9db" } ] },
            { "featureType": "poi", "elementType": "geometry", "stylers": [ { "visibility": "off" } ] },
            { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#bfc9cc" }, { "visibility": "on" } ] },
            { "featureType": "poi.business", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.school", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.medical", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "poi.government", "elementType": "geometry", "stylers": [ { "color": "#cdd6d8" }, { "visibility": "on" } ] },
            { "featureType": "landscape.natural", "elementType": "geometry", "stylers": [ { "color": "#dee5e8" } ] }
        ]
    };

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

    var iconBase = 'images/pin.png';

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon:iconBase,
        title: 'Moby Dick'
    });

    marker.setMap(map);       

}

google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});