When we use a google map on a website, there is a trick to get a black and white filter without using a bit of javascript of the API, which can be tricky to use.

This trick use the CSS property filter().

This property is now pretty well supported on modern browsers. (except for IE and Opera Mini).

Let’s say that the map selector has for ID #map, the CSS code will be :


#map img:not([src$=".png"]) {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

In the code above, the selector :not([src$=".png"]) means to not put markers on the map in black white if they have the “.png” extension.

You can check a snippet of this code below :