Google Maps iframe in Black and White

#css

#google

#html

#iframe

#filter

#maps

If you search on the web on how to to get a black and white google maps iframe it's quite surprising how hard it is to find a good answer.

So that's why I'm sharing this tip.

<iframe class="map" width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps(...)"></iframe>

.map {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
         -o-filter: grayscale(100%);
            filter: grayscale(100%);
}

As you can see, it is quite simple, all you need to do is add a css filter.

Here is a fiddle: https://jsfiddle.net/3a13gfk9/

Here is the result:

Result