44

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

2
  • I doubt it. It might be possible in IE by overlaying the map with a DIV that uses one of the DirectX filter CSS properties to make anything underneath it grayscale, but it would also overlay the controls. Interested to see whether anything comes up
    – Pekka
    Oct 23, 2010 at 10:50
  • 1
    Related: gis.stackexchange.com/questions/5964/…
    – radek
    Jun 7, 2011 at 12:52

8 Answers 8

117

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');
1
  • How to return as it was before the changes ? Mar 22, 2015 at 22:22
45

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.

JSON output demonstrating styles array to set into mapOptions

2
  • 7
    Much better solution! Feb 5, 2016 at 18:43
  • 4
    Much simpler and better solution imo. Should be accepted answer. Nov 24, 2016 at 11:35
16

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
}
3
  • 2
    ..beware.. colored map marker will be displayed in grayscale too.
    – Biraj Bora
    Jun 11, 2014 at 12:05
  • Finally the one I've been looking for! I like this one as it turns everything into grayscale. The problem with the js solution is that you lose some of the defaults in the map embed.
    – adedoy
    Nov 25, 2014 at 8:18
  • 1
    This is brilliant. - I had a problem with grayscale.svg, ommited that line and it worked for me.
    – mrmut
    Dec 14, 2016 at 11:03
2

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%);
}
0

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.

2
  • Having the map in grayscale for IE only wouldn't be particularly helpful seeing as the rest of the application is being coded using HTML5 and Canvas - thanks for the answer though!
    – DLiKS
    Oct 23, 2010 at 10:57
  • @DliKS yeah. I don't think there is a cross-browser way to do this, the filter stuff never caught on in other browsers. Sadly! ... It may be possible in Flash, I don't know.
    – Pekka
    Oct 23, 2010 at 10:59
0

Check out this:

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

Works like a charm :)

-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

0
-14

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.