ehis_g
Last Updated: February 06, 2019
·
24.75K
· 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="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

1 Response
Add your response

30776

you protect other table add-ons, https://www.pearltrees.com/routertableimage such as a featherboard, for https://routertabletop.page4.me/ added woodworking choices.

10 months ago ·