make iframe google map black and white

I have used a 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 a google map in black and white color?

Answers


It does work, but you should also add the formatting that the different browsers require for grayscale.

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

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


By rights the only way to make a black and white Google Map is to use their Styled Maps api

Your post was tagged with API so I assume a non-iframe option is ok for you. If the inclusion method is not fixed this might will give you an idea of alternative. It is also possible to use the styled maps to generate a Google Static Map which would then also be iFrame friendly.

You could also take a look at Stamen maps Which are based on Open Street Maps, but can be used as overlay layers to Google Maps. The form of delivery is not likely possible just through a crafted iframe url.


Add a <div> arround the <iframe> and stle it as:

webkit-filter: grayscale(100%);

Try to use

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

This will help


This one is achieved by using some css

Here is working code

.map {
         filter: grayscale(100%);         
}
<iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4917.1193047590605!2d4.4690507720313!3d51.96022102967837!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c5cb67ae23c02d%3A0xdac4c06bc7904d2!2sRododendronplein+10%2C+3053+ES+Rotterdam%2C+Nederland!5e0!3m2!1snl!2ses!4v1541007683407" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Need Your Help

Android smooth game loop

java android opengl-es opengl-es-2.0

I have problems with smooth scrolling in OpenGL (testing on SGS2 and ACE)

Using Reader Monad for Dependency Injection

scala dependency-injection functional-programming monads

I recently saw the talks Dead-Simple Dependency Injection and Dependency Injection Without the Gymnastics about DI with Monads and was impressed. I tried to apply it on a simple problem, but failed...