Google Maps in Grayscale

Question

Is there any way to display a Google Map (embedded via the Javascript API) in grayscale without losing any other functionality?

Answer 1

There's a little shorter way (comparing to @Roatin Marth's best answer) to make your Google map grayscale with Google Maps JavaScript API v3 by directly including styles you generated with Google Maps API Styled Map Wizard into google.maps.MapOptions object:

var container = document.getElementById('map_canvas');
var mapOptions = {
  zoom: 11,
  center: new google.maps.LatLng(40.6743890, -73.9455),
  styles: [{
    stylers: [{
      saturation: -100
    }]
  }]
};

var map = new google.maps.Map(container, mapOptions);

You get the array set under styles property in mapOptions variable by clicking onto "Show JSON" button inside Map Style panel when finishing your styles customisation using Google Maps API Styled Map Wizard.