iframe埋め込みGoogleMAPの色を変える方法(API不要・無料)

ホームページやブログにGoogleMAPを埋め込んだ際に、デザイン的にGoogleMAPの色を変更したいときがあります。

今まではAPI版のGoogleMAPを利用すれば色変更が簡単に行えたのですが、2018年7月のGoogleMAP APIの有料化により手軽に利用するのが難しくなりました。

iframeで埋め込むGoogleMAPは今後も無料で使えるますが、iframe版では基本的に色変更などのカスタマイズが出来ません。

今回はCSSを利用してiframe版の無料GoogleMAPの色変更を行う方法を解説します。

iframe版無料GoogleMAPのHTMLを取得

WEB版のGoogleMAPを開きます
https://www.google.co.jp/maps/

「共有」マーククリック

「地図を埋め込む」タブの「HTMLをコピー」をクリックすると、以下のHTMLソースが取得できます。

取得したこのHTMLソースをベースにして変更していきます。
※レスポンシブ対応のためにCSSにあらかじめ「width:100%」を追加してあります。

GoogleMAPの色設定CSS追加方法

<iframe>タグ内の、「style=" ～ "」にCSSを追加していきます。
追加するCSSのプロパティ名は「filter」と「-webkit-filter」の2つです。

以下が変更例です。

白黒

filterプロパティにgrayscaleを設定すると白黒になります。

■grayscale(50%)の場合

【追加CSS】filter:grayscale(50%);-webkit-filter:grayscale(50%)

■grayscale(100%)の場合

【追加CSS】filter:grayscale(100%);-webkit-filter:grayscale(100%)

セピア

filterプロパティにsepiaを設定するとセピアになります。

■sepia(40%)の場合

【追加CSS】filter:sepia(40%);-webkit-filter:sepia(40%)

彩度変更

filterプロパティにsaturateを設定すると彩度を設定できます。

■saturate(150%)の場合

【追加CSS】filter:saturate(150%);-webkit-filter:saturate(150%)

明るさ変更

filterプロパティにbrightnessを設定すると明るさを設定できます。

■brightness(80%)の場合

【追加CSS】filter:brightness(80%);-webkit-filter:brightness(80%)

コントラスト変更

filterプロパティにcontrastを設定するとコントラストを設定できます。

■contrast(80%)の場合

【追加CSS】filter:contrast(80%);-webkit-filter:contrast(80%)

透明度変更

filterプロパティにopacityを設定すると透明度を設定できます。

■opacity(80%)、背景色(red)の場合
※透明度の例のために背景色を赤に設定してあります。

【追加CSS】filter:opacity(80%);-webkit-filter:opacity(80%)

色相変更

filterプロパティにhue-rotateを設定すると色相（0deg～360deg）を設定できます。

■hue-rotate(140deg)の場合

【追加CSS】filter:hue-rotate(140deg);-webkit-filter:hue-rotate(140deg)

■hue-rotate(330deg)の場合

【追加CSS】filter:hue-rotate(330deg);-webkit-filter:hue-rotate(330deg)

階調反転

filterプロパティにinvertを設定すると階調を反転できます。

■invert(80%)の場合

【追加CSS】filter:invert(80%);-webkit-filter:invert(80%)

まとめ

API無しでiframe埋め込みGoogleMAPの色を変えるにはCSSのfilterプロパティをインラインで追加すればOK。

今回紹介した変更例だけでなく、プロパティの数値などを細かく調整すれば更に色々とカスタマイズできます。

基本的にCSSのfilterプロパティは全て利用できますので、GoogleMAPの色をちょっと変更したいときにご利用ください。