Last Updated: February 06, 2019
· jbernardo95

Google Maps iframe in Black and White

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=""></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:

Here is the result:


1 Response
Add your response


you protect other table add-ons, such as a featherboard, for added woodworking choices.

10 months ago ·