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

Just use CSS3 grayscale() filter effect for the Google maps iframe element! It works because the js code prints images.

iframe { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Try also to target only the background images by applying this to the very first div element under the div.gm-style (or any other wrapper). I don't know if Google changes the dom structure often but at the moment speaking (25 Nov 2014) this works fine.

iframe .gm-style > div:first-child {
  // Same code here
}

Answer 2

Yes, there is a third party API for Google maps that provides gray-scale (snazzymaps).

Its very simple. You can use this website to get the different color scheme for google maps.

http://snazzymaps.com