GoogleマップのAPIを利用すると、色の変更はもちろん、マップピンを変更したりといろいろ出来るのですが、一定以上の表示になると追加料金がかかるなど、年々費用がかかるようになってきています。
iframeの埋め込みであれば現状無料で使用できますので、今回はAPI不要でCSSのみでマップの色を変更する方法を解説していきます。
filterプロパティを使って色を変更する
Googleマップ(iframe)の色を変更するには、CSSのfilterプロパティを使用します。
filterプロパティには以下の値が指定可能です。
- grayscale：モノクロ 0%(初期値)～100%
- saturate：彩度 0%～100%(初期値)
- sepia：セピア 0%(初期値)～100%
- hue-rotate：色相反転 0deg(初期値)～360deg
- invert：階調反転 0%(初期値)～100%
- blur：ぼかし 0px(初期値)～
- brightness：明るさ 0%～100%(初期値)
- contrast：コントラスト 0%～100%(初期値)
- drop-shadow：影(ドロップシャドウ) x値,y値,ぼかし,広がり,色
- opacity：透明度 0%～100%(初期値)
Googleマップの色変更例
filterプロパティを利用した、サンプルをいくつか紹介いたします。
モノクロ(50%)
iframe {
filter: grayscale(50%);
}モノクロ(100%)
iframe {
filter: grayscale(100%);
}セピア
iframe {
filter: sepia(25%);
}階調反転
iframe {
filter: invert(100%);
}色相反転
iframe {
filter: hue-rotate(100deg);
}さいごに
いかがでしたでしょうか。
filterプロパティを使用すると手軽に様々なカスタマイズが可能です。今回紹介したiframeでのGoogleマップの埋め込み以外でもfilterプロパティは使用出来ますので、ぜひ使ってみて下さい。
