こんにちは。
エンジニアの松村です。

先日、久しぶりに競馬場へ行ってきました。
この秋から一定数の指定席のみが開放され、その席数分入場できるといった形で営業が再開されました。
大勢のファンで賑わっていた、コロナ以前の競馬場の姿とは大きく異なっていましたが、それでも目の前で競走馬が駈ける姿を見れたことが嬉しかったです。
来場されてたい他の方々も、久々の競馬を静かに楽しんでいるようでした。

さて、今回はGoogleMapについてです。
2018年にGoogle Maps APIの仕様が大きく変わり（Google Maps Platform）、サイト上のGoogleMapカスタマイズにはAPIキーが必須となりました。
仕様変更に伴い、iframeに差し替えた方も多いのではないでしょうか。

iframeのGoogleマップは基本的にカスタマイズ出来ないのですが、実はcssで色合いを変更することが可能です。
カスタマイズ例とあわせてご紹介したいと思いますので、それでは参りましょう。

( Index )

1. Google Maps Platformについて
2. filterプロパティを使って色合いを変更
3. カスタマイズ例
   1. グレースケール(grayscale)その1
   2. グレースケール(grayscale)その2
   3. セピア(sepia)
   4. 階調反転(invert)
   5. 階調反転(invert) × 色相変更(hue-rotate)
4. おわりに

Google Maps Platformについて

まず、簡単にGoogle Maps Platformの説明を。 Google Maps APIからサービス内容・仕様が変更されGoogle Maps Platformとなりました。 これにより、APIキーを利用してマップを表示させるには、支払情報の登録が必要となり、使用量に応じた料金体系(※)となりました。 iframeのGoogleMapであれば、カスタマイズは出来ないものの、無料で使えることから差し替えて使用しているケースがあります。 ※$200/月までは無料で使用できます。詳しい料金体系はこちらをご覧ください。

filterプロパティを使って色合いを変更

見出しのままなのですが、iframeの色合いを変更するにはcssのfilterを使用します。 ぼかしやドロップシャドウの他、彩度や明度も調整出来るプロパティです。 自由自在に調整とまではいきませんが、実際のカスタマイズ例をご紹介します。 ※Internet Explorerでは使用できませんのでご注意ください。 filterプロパティについての詳細は下記をご覧ください。

CSS filter｜MDN

カスタマイズ例

グレースケール(grayscale)その1

filter: grayscale(.5);

グレースケール(grayscale)その2

filter: grayscale(1);

セピア(sepia)

filter: sepia(.25);

階調反転(invert)

filter: invert(100%);

階調反転(invert) × 色相変更(hue-rotate)

filter: invert(100%) hue-rotate(-180deg);

おわりに

いかがでしたでしょうか。 そのまま使っていたiframeのマップも、サイトデザインに合わせた雰囲気にカスタマイズすることによって、より引き締まって見えると思います。 自由自在に調整できるわけではないですが、参考になりましたら幸いです。