CSSだけで埋め込みGoogle Mapをモノクロに

Google Mapの埋め込みの見た目を変えるためには基本的にはGoogle Maps APIを使用してプログラムを書く必要がありますが、全体的にモノクロにしたいだけなら、CSSだけでいけます。

実装

こんな感じでhtmlを書いて

こんな感じでcssを書きます

以上!

filter: hoge(); は、画像にいろんなフィルターをかけられるプロパティ。ぼかしを入れたりセピア調にしたり、彩度を変えたりといろんなことができる神プロパティです。grayscale は、モノクロ調にするフィルターです。

注意として、IEでは使えません。

なので、Google Mapをモノクロにしてほしいと言われた際は、Google Maps APIを使ってちゃんとやるか、IEでは適応されませんが大丈夫ですか?か、どっちか確認しておきましょう。

現場からは以上です。

シェアしてくだちい

フォローしてくだちい