ウェブ版 Googleマップをモノクロ(グレースケール)で表示する方法

とある人からウェブ版 Googleマップをモノクロ(グレースケール)で表示したいという要望があり、サクっとスタイルシート(CSS)のカスタマイズで対応しました。

Firefoxや ChromeにStylusという拡張機能をインストールするとスタイルシートをカスタマイズできるようになりますが、Googleマップの URL ( https://www.google.co.jp/maps/ )で始まるURLに対して下記のスタイルシートを適用すると地図・航空写真をグレースケールで表示できます。
色の表示以外は普通の状態ですので、いままでどおりに操作もできます。
canvas {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}


サンプル画像(画面キャプチャ):
画像



追記:
ちなみに、地図・航空写真だけではなくてストリートビューもモノクロ(グレースケール)になりますよ。
また、スタイルシートのカスタマイズを grayscale から sepia に変更すると、セピア色のちょっとノスタルジックな感じなります。

この記事へのコメント

この記事へのトラックバック