google-maps - iframe の Google マップを白黒にする

Question

iframeでGoogleマップを使用しました。

<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>

Googleマップを白黒で表示するには?

Answer 1

それは機能しますが、さまざまなブラウザーがグレースケールに必要とするフォーマットも追加する必要があります。

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

これがフィドルです：http://jsfiddle.net/j9p9w62f/

Answer 2

権利により、白黒のGoogleマップを作成する唯一の方法は、スタイル付きマップapiを使用することです。

あなたの投稿はAPIでタグ付けされているので、iframe以外のオプションで問題ないと思います。包含方法が修正されていない場合、これはあなたに代替案のアイデアを与えるかもしれません。スタイル付きマップを使用してGoogle静的マップを生成することもできます。これはiFrameにも対応しています。

また、オープンストリートマップに基づいているが、Googleマップのオーバーレイレイヤーとして使用できるおしべマップを見ることができます。細工されたiframeURLだけでは、配信の形式はおそらく不可能です。

Answer 3

の周りにa を追加し<div>て、次のように表示します。<iframe>

webkit-filter: grayscale(100%);