ルート表示したGoogleマップをWebサイトに埋め込む方法

こんにちは、チーフクリエイターのSHOJIです。

GoogleマップをWebページ内で表示させているサイトは数多くあるのですが、そのほとんどが単にマップを表示させているだけだと思います。

弊社サイト内での表示もそうだったのですが、そもそもマップを確認する必要のあるユーザーは土地勘のない方なので、単にマップを表示させただけでは不親切で情報不足だと感じます。

どうですか？マップが表示されているだけで、ぱっと見まったく分からないですよね。

そこで今回は、ルート検索機能を利用してルート表示させたGoogleマップをWebページに埋め込む方法をご紹介します。

• \\　目 次　//
• 埋め込みコードの発行手順
• 注意点
• あとがき

埋め込みコードの発行手順

① Googleマップで目的地となる場所を表示します。

②［ルート・乗り換え］アイコンをクリックします。

③ 入力ボックスに場所の名前や住所を直接入力するか、地図上の任意の場所をクリックして出発地を設定します。

④ ルートが表示されるので、移動手段を選択します。

⑤ 左上のメニューを開いて［地図を共有または埋め込む］をクリックします。

⑥ 共有ウィンドウが開くので、必要に応じて共有リンクをコピーします。

⑦［地図を埋め込む］タブに切り替えて、埋め込みコードをコピーします。

⑧ 同じ要領で、移動手段を車に設定してルート表示させることも可能です。移動手段が徒歩の場合はルートが点線表示されますが、車の場合は直線表示となり違いが分かりやすくなっています。

⑨ コピーした埋め込みコードを既存のコードと差し替えれば終了です。

単にマップを表示させただけよりも、出発地点からどのような経路を辿ればいいのか分かりやすくなったと思いませんか？
 

注意点

埋め込みコードを発行する際に１点だけ注意する必要があります。

手順④にてデフォルトでは最短ルートが自動的に表示されますが、ルートをドラッグすると任意に変更することが可能です。

ですが、変更したルートのまま手順⑦の［地図を埋め込む］タブに切り替えても、元の最短ルート表示での埋め込みコードしか発行されません。

そのため、どうしても決まったルートで表示させたい場合は面倒でも目的地を追加するか、Googleマイマップの利用を試してみてください。
 

あとがき

WebサイトにGoogleマップを表示することができる制作者の方であれば、手順さえ分かれば難しいこともなく差し替えることができると思います。

また、ここまで経路表示されるようになったのなら、小見出しと経路の簡単なテキストをもうひと手間加えるだけでユーザー目線の分かりやすいアクセスマップへとブラッシュアップできます。

Googleマップ表示の見直しに、この記事が参考になれば幸いです。
 

• 前の記事へ

  在宅勤務始めて半年が過ぎたので気づいた事や良い点を振り返ります！

• 最新情報へ

  インフォコネクトからのお知らせやスタッフブログ、Webに関する最新情報を発信！