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

Apart from writing the good people at Google and asking them to create grey-scale versions of all of their image tiles and an optional API parameter, no.

Answer 2

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.

Answer 3

IE has the filter: gray directive.

It renders any HTML element in grayscale. JSFiddle here.

You may be able to apply this to the map's parent DIV. It may turn the map it contains in to a grayscale represtenation. I can't say whether this will work without side effects - you'd have to try. But it's well possible.

IE only, though, but supported since Version 4.

Grayscale Filter docs at MSDN

Other than that, I think there is a Flash API for Maps, isn't there? It might be easier to achieve there.

Answer 4

Yes, in V3 of the api they have introduced StyledMaps.

They've even provided a tool for you to generate the code for the styles you like. Slide the "Saturation" all the way down and you've got grayscale going on!

The following example displays a grayscale map of Brooklyn:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

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

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

Answer 5

Use the CSS filter property to convert the google map to black and white. 100% is completely black and white

selector {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

Answer 6

Check out this:

http://snazzymaps.com/style/15/subtle-grayscale

Works like a charm :)