Google maps API不要　iframe埋め込みのGoogleMAPのカラーを変更する方法

ブログやwebサイトの会社案内などにアクセスマップを表示させる場合、Google Mapを利用することがよくあります。
Google Mapの利用には「GoogleMAP API」と「iframe」で利用できる2つの形式があります。
「GoogleMAP API」を利用する場合は、いろいろとカスタマイズ出来ますが、APIキーや表示回数によって課金されるなど有料化になっています。
一方「iframe」の場合は無料で利用できるがカスタマイズができないようになっています。
今回は「iframe」を使ったGoogle Mapのカラーを変更する方法を説明しています。

GoogleMAP API形式

GoogleMAP APIをつかったMAPでは、マーカを2複数設置、道路だけ色を変更、地図上に線を引いたりするなど、GoogleMAPをオリジナルにカスタマイズできWEBサイトにあった地図に変更することが出来ます。
表現できる自由度は高いく、毎月200ドル分まで利用できますが、無料条件を超過した場合は料金が発生します。アクセス数が多いサイトなどは直ぐに課金になってしまいます。

iframe形式

iframe形式の場合は利用料金が発生せず無料でGoogleMAPを使うことが出来ます。
API形式が無料で使えていた時はあまり利用する事がなかったのですが、API形式が有料になって以降は、iframe形式が利用されることが多くなりました。
iframe形式では、ほどんどカスタマイズすることはできませんが、設置方法が簡単で専門知識がなくてもWEBサイトに設置することが出来ます。

GoogleMAPのカラーを変更

iframe形式のGoogleMAPのカラーを変更すにはcssの「filter」プロパティを使います。
※カッコ()内の数値は自由に変更してください。

オリジナル

白黒50％

filter:grayscale(50%)

白黒100％

filter:grayscale(100%)

セピア

filter:sepia(50%)

彩度変更

filter:saturate(150%)

色相変更

filter: hue-rotate(300deg)

階調反転

filter: invert(80%)

まとめ

「GoogleMAP API」を利用しなくてもCSSの「filter」プロパティを使えば「iframe」でGoogleMAPの色を変更することが出来ます。
GoogleMAPのカラーを変更すだけでもサイトの雰囲気はずいぶん変わります。
「filter」プロパティを細かく調整してサイトにあったGoogleMAPを設置してみてはいかがでしょうか。