[css]ホームページに埋め込んだ Google Mapをcssだけでモノクロにする方法

皆様のホームページには、大抵場所を案内するためにGoogle Mapが埋め込まれていますね。そんなGoogle Mapですが、デフォルトの状態のデザインを使われているのが一般的ではないでしょうか？今回はそんなGoogle Mapをモノクロデザインにする方法をご紹介したいと思います。サイトのデザインによっては、カラーがいっぱいついているGoogle Mapのデザインが合わないので変えたいけどわからないという方がいらっしゃるかと思います。その悩み当ブログで解決したいと思います。

Google Mapを埋め込んでみよう

まずは、Google Mapを埋め込んでみようと思います。

Google Mapを埋め込むためには、まずGoogle Mapで埋め込みたい住所を入力して、共有というボタンをクリックします。共有ボタンをクリックしますと、地図を埋め込むという欄がありますので、そこで生成されたコードをHTMLにコピーしてください。

上記のコードを実際に埋め込んでみようと思います。

Google Mapを埋め込んで見た

Google Mapをホームページに埋め込むことができるようになりましたね。デフォルトでは、widthの欄が６００となっておりますので、１００％など％にすることで、スマホにした際にはみ出ることがなくなりますので、埋め込んだのにはみ出て困った！という方はそちらの設定を変えて見てください。

Google Mapの色をモノクロにしてみよう

先ほど埋め込んだGoogle Mapをモノクロにしていこうと思います。grayscaleを変えることで、 Google Mapをモノクロにすることができます。
cssを一行記述するだけですが、やり方がわからないという方がいらっしゃると思います。サンプルコード、モノクロにしたサンプルも記述しておきます。

<style>
  iframe{
   filter:grayscale(1);
   -webkit-filter:grayscale(1);
 }
</style>

Google Mapをモノクロにしたサンプル例

上記のようにcssだけでgoogle mapがモノクロになりましたね。

まとめ

Google Mapは幅広く多くのサイトで使われているかと思います。そんなGoogle Mapをデフォルトの状態ではなく、ホームページのデザインにあった物に変えていくというのはあなたのサイトのデザインをよりいいものにするかと思います。
今回は、モノクロにする方法をご紹介させていただきましたが、落ち着いたイメージのサイトにはぴったりだと思います。是非活用してください。