Make iframe google map black and white

Question

I used google map in iframe.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.in/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.in/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Madurai,+Tamil+Nadu&amp;aq=0&amp;oq=madursi&amp;sll=10.782836,78.288503&amp;sspn=5.674603,10.755615&amp;ie=UTF8&amp;hq=&amp;hnear=Madurai,+Tamil+Nadu&amp;t=m&amp;z=12&amp;ll=9.925201,78.119775" style="color:#0000FF;text-align:left">View Larger Map</a></small> 

How to display google map in black and white?

Answer 1

It works, but you must also add the formatting that is required for different browsers for grayscale.

<div style="-webkit-filter: grayscale(100%); filter: grayscale(100%);">

Here's the fiddle: http://jsfiddle.net/j9p9w62f/

Answer 2

rights the only way to make a black and white google map is to use their stylized api maps

Your message has been tagged by the API, so I assume the non-iframe option is right for you. If the inclusion method is not fixed, this may give you an idea of ​​an alternative. You can also use map-style maps to create a Static map , which will also be iFrame-friendly.

You can also take a look at Pop-up Maps , which are based on Open Street Maps, but can be used as overlay layers for Google Maps. The delivery form is hardly possible only through the processed iframe URL.

Answer 3

Add a <div> arround <iframe> and write it as:

 webkit-filter: grayscale(100%); 

Answer 4

Try using

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

It will help