使iframe谷歌地图黑色和白色

Question

我已经在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> 

如何显示在黑色和白色颜色的谷歌地图？

Answer 1

通过rights使黑白谷歌地图的唯一方法就是用自己的Styled Maps api

，您的帖子被标记与API，所以我认为一个非iframe的选择是对你合适。如果包含方法不固定，这可能会给你一个替代的想法。也可以使用样式化的地图生成Google Static Map，然后这也将是iFrame友好的。

你也可以看看Stamen maps这些都基于开放街道地图，但可以用作Google地图的叠加图层。传递的形式不可能通过制作的iframe url来实现。

Answer 2

添加<div>角落找寻和STLE它：

webkit-filter: grayscale(100%); 

Answer 3

它的工作，但你也应该补充的是，不同的浏览器需要灰度格式。

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

这里的小提琴：http://jsfiddle.net/j9p9w62f/

Answer 4

尝试使用

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

这将有助于