ブログについて
【API不要】
Google Mapの色を変える
／iframe形式
2020.02.10
制作
技術
こんにちは。制作部の中山です。
少し前の話で恐縮ですが、Google Mapの仕様が大幅刷新しました。
Google MapはGoogleを代表する地図検索サービスで、外部のサイトやブログへの地図の表示も可能です。きっと多くの人が一度は目にしたことがあるのではないでしょうか？
多くの人が利用しているサービスだからこそ、Google Mapの刷新には大きなインパクトがありました。
本筋からそれるため今回の記事では詳しい説明は省略しますが、Google Mapをサイトに表示させるためには、大きく分けて「iframe」形式と「Google maps API」形式の2つの方法があります。
今回の刷新で大きな変更があったのは「Google maps API」形式です。APIキーが必須となり、月に200＄までは無料、超過した場合は、表示回数や使用量によって費用が発生する「従量課金制」となりました。
Google maps API形式とは？
そもそもAPIとは「アプリケーションプログラミングインタフェース」の略で、”異なるシステム間”でも、外部の他のプログラムを呼び出して利用することができるとても便利な仕組みです。
”異なるシステム間”と抽象的に表現すると難しく感じる方もいらっしゃるかもしれませんが、「FacebookでGoogle Mapを表示させることができる」と例を挙げると、APIがぐっと身近に感じられると思います。
「Google maps API」では、Googleマップの機能をサイトはもちろん、AndroidやiOS向けのアプリで利用することができます。
お店のルートを表示させることはもちろん、オリジナルの画像を使用した地図の作成、サイトの雰囲気にあわせて地図の色やデザインを変更することも可能です。
また「Google maps API」自体がJavaScriptで動作しているので、設置先のサーバの影響を受けないことも、大きな利点といえます。
iframe形式とは？
一方今回の刷新で大きな変更のなかった「iframe」形式は、細かなカスタマイズは出来ませんが、Google Map上で1つ1つ順番に設定していけば、専門職以外の方でも簡単に設置をすることができます。
カスタマイズがあまり出来ないこともあり、制作の現場では注目を浴びることのなかった「iframe」形式ですが、「Google maps API」形式が実質有料となったことで、利用頻度が増えてきました。弊社でもクライアント様の職種や規模感によっては「Google maps API」を推奨していますが、『アクセス数がわからず、どの程度費用がかかるか不安』との声も多く聞かれることから、店舗案内など簡単な使用目的では「iframe」形式で地図を埋め込むようにしています。
上記のような背景から、今回は「iframe」形式での地図のカスタマイズについてまとめてみたいと思います。「Google maps API」ほどの細かなカスタマイズは出来ませんが、少し手を加えるだけで、地図の雰囲気をガラッと変えることができます。
CSSの「filter」プロパティ
カスタマイズには、cssの「filter」プロパティを利用します。
filterプロパティは、要素に対して色や明るさを変化させるグラフィック効果を与えたい時に利用します。テキストや画像はもちろん、border、text-decoration、iframe等にも使用できるのです。
よく使うfilterプロパティまとめ
具体的にfilterプロパティでどんなことが実現可能か、下記表にまとめてみました。
こうやってまとめてみると、filterプロパティが登場したことによって、今までPhotoshopなどで加工していたものが、cssだけでここまで表現できるのかと驚きます。
| プロパティ | 効果 | 値 |
|---|---|---|
| grayscale | モノクロ効果 | 0%(初期値)～100% |
| saturate | 彩度の変更 | 0%～100%(初期値) |
| sepia | セピア効果 | 0%(初期値)～100% |
| hue-rotate | 色相の変更 | 0deg(初期値)～360deg |
| invert | 階調の反転 | 0%(初期値)～100% |
| blur | ぼかし効果をつける | 0px(初期値)～10px |
| brightness | 明るさ | 0%～100%(初期値) |
| contrast | コントラスト | 0%～100%(初期値) |
| drop-shadow | 影をつける | 水平方向の距離,垂直方向の距離,ぼかし距離,広がり距離,影の色 |
| opacity | 透明度 | 0%～100%(初期値) |
カスタマイズ例
前項のfilterプロパティを利用して、実際にiframe版のGoogle Mapの色を変えたカスタマイズ例をご紹介いたします。
なお、Google Mapから発行した埋め込み用のiframeタグは基本触っていませんが、レスポンシブ対応として「width: 100%」を追記しております。
オリジナル
モノクロ（60%） ※grayscaleプロパティの使用例
モノクロ（100%） ※grayscaleプロパティの使用例
セピア ※sepiaプロパティの使用例
彩度 ※saturateプロパティの使用例
階調反転 ※invertプロパティの使用例
色相変更 ※hue-rotateの使用例
まとめ
いかがでしたでしょうか？ 今回はカスタマイズ例として、一部プロパティしか使用していませんが、組み合わせ次第で「iframe」形式でも様々なカスタマイズを実現できると思います。
そこまで複雑な設定もなく、さらっと実装できるので、「iframe」形式で地図を埋め込む際には、ぜひお試しいただけると嬉しいです。
それでは、今回はこのあたりで。