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

2021/8/12 HTML/CSS

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

実装

こんな感じでhtmlを書いて

<div class="googlemap">
  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3240.482450600333!2d139.689727715259!3d35.68974363019235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1628750015349!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

1

2

3

<div class="googlemap">

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3240.482450600333!2d139.689727715259!3d35.68974363019235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1628750015349!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</div>

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

.googlemap {
  iframe,
  object,
  embed {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
  }
}

1

2

3

4

5

6

7

8

9

10

11

.googlemap {

iframe,

object,

embed {

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);

}

}

以上！

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

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

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

現場からは以上です。