サイトで店舗やイベント会場の位置を告知したい！といった場合、最も分かりやすく伝えることができるのはGoogleマップを表示させる事ではないでしょうか？
サイトにGoogleマップを埋め込んで表示させると聞くとなんだか難しそうな気がしますが、手順を踏めばとても簡単に導入できます。
2018年7月16日からはGoogleMAPの利用が有料となりましたが、今回の方法は無料で使える範囲内での方法なので安心してください。
GoogleMAPが有料化？
導入の前にGoogleMAPの有料化について軽く触れておきます。
2018年7月16日以降、サイトでGoogleMAPを読み込む際には利用料がかかる形になりました。
と、それだけ聞くとやっぱりお金がかかるのか！となるのですが、そんなことはありません。
Googleからの情報が小出しになった為に誤解されている方が多いのですが、これは元々GoogleMAPのAPIを使って地図を表示していた場合、APIの利用に対して料金が発生するようになるという話で、普通にGoogleMAPをサイトに載せるだけであれば今まで通り無料で利用ができます。
今回はこの無料利用の範囲内でサイトに地図を掲載する方法をお伝えします。
GoogleMAPから地図埋め込み用のコードを取得する
それでは作業を進めていきましょう。
GoogleMAPで載せたい地点を表示する
まず、埋め込みたい地点をGoogleMAPで検索します。
この記事では例として東京スカイツリー付近の地図を表示させてみますが、各々の表示させたい地点で大丈夫です。
その地点の情報が上図のように表示されたら次に進みます。
埋め込み用コードを取得する
表示できたら「ルート・乗換」「保存」などのアイコンの右端にある共有をクリックします。
すると地図中央にこのような共有画面が開きます。
デフォルトでは「リンクを送信する」のタブが有効になっていますので、右にある「地図を埋め込む」をクリックします。
地図を埋め込むのタブがアクティブになり、サイトにGoogleMAPを埋め込む用のコードが表示されます。
このコードをコピーし、サイトに貼り付けるだけでGoogleMAPを表示させることができます。
地図のサイズを調整する
とはいえデフォルトでは「横650px × 縦450px」のサイズに固定されているので載せたい場所によっては大きい、小さいという問題があるかと思います。
その場合はコードの横にある「中▼」をクリックしてサイズを選択する事が可能です。
サイズは、
小・・・横400px 縦300px
中・・・横650px 縦450px
大・・・横800px 縦600px
または、カスタムサイズで任意のサイズを指定する事が可能です。
とはいえ、レスポンシブ対応のページでpx指定のマップを入れてしまうとスマホでの表示が崩れてしまう事もあります。
任意でサイズを変えるようにしたい場合はiframeの「width=”〇〇” height=”〇〇”」の部分を削除して任意のclassを追加、そのclassにwidth:100%;といった形でサイズを指定することで実現可能です。
heightはPCとスマホで調整してあげる必要がありますので注意してください。
上記の方法でマップを埋め込むとこのように
ページ内に地図を表示する事ができるようになりました。
思ったよりも簡単だったのではないでしょうか？
まとめ
ということでGoogleMAPから地図情報をサイトに埋め込む方法でした。
このようにGoogleMAPから直接コードを取得した場合に限っては無料で使用が可能です。
（2019/05/22時点、この先どうなるかは分かりませんが。）
APIを使っての呼び出しを行うと指定した条件で地図を表示できたり、距離や移動時間、ルートを表示させたりもでき非常に利便性が高いのですが、通常利用する分にはそこまでの機能を使う事もないかと思います。最悪文章で補足する事もできますしね。
お店や会社までの地図やイベント会場への案内などGoogleMAPをサイトで見せる事の利点はとても大きいです。
ぜひ試してみてください。
