Applying Grayscale in Google Map Terrain Only - google-maps

Question

I tried doing a Google Map with multiple marker, it works without applying the Google Map style but when i set the background to grayscale it does not seem to display the map. I would like to maintain the marker colored so CSS styling is not an option. The code can be seen below
function initialize() {
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -20 }
]
}
];
var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});
var locations = [
['United States', 38.976492, -103.875732, 3],
['Europe', 54.747569, 112.421105,346.289063, 3]
];
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');

Answer 1

This part of your code is wrong, it will prevent the map from loading:
mapTypeId: [google.maps.MapTypeId.ROADMAP, 'map_style']
mapTypeId has to be exactly 1 valid mapType, not an array .
You may remove this line completely.
When you want to draw the controls for these mapTypes, you must set the mapTypeIds-option of the mapTypeControlOptions-property instead:
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 3,
center: new google.maps.LatLng(45.92, 1.25),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
});
your map should be displayed now with the 2 desired mapType-controls.
To apply a grayscale set the saturation to -100