Webサイト訪問者に場所を知らせる手段として、WebサイトにGoogle Mapを埋め込み、指定場所に目印をつけて伝える方法が便利です。Webサイトを通じて場所をわかりやすく伝えたい方は必ず身に着けておきたいスキルです。
Google Mapで場所を伝える表現はいくつかあり、Webサイト訪問者が求める表示方法を選択することで価値が上がります。本記事では、WebサイトにGoogle Mapを埋め込む基本的な手法からニーズに合わせた表示方法をご紹介いたします。
Google Mapを様々な視点でWebサイトに表示する方法
Google Mapを自身のWebサイトに埋め込む方法(基本)
ここではワードプレスを利用してGoogle MapをWebサイトに埋め込みます。
- グーグルマップへアクセス
- キーワード検索窓に「東京タワー」と入力
- 「共有」ボタン → 「地図を埋め込む」ボタン →「htmlをコピー」ボタン
- ワードプレスのカスタムhtmlを選択して上記コピーした「html」を貼り付け
航空写真の視点で表示
対象場所のイメージを更に広げるために上空写真の視点で表示することもできます。Google Map左下に画面表示を切り替える場所がありますので、表示したい画面を選んで上記③④を実行すると埋め込むことができます。
ストリートビュー視点で表示
下記のようにストリートビューモードを利用すれば、現場イメージが更にわかりやすくなります。
Google Mapの表示サイズを変更する
Google Map表示サイズは「小・中・大・カスタムサイズ」に変更できる
Google Mapの共有ボタンを押した後は表示サイズを下記のように「小・中・大・カスタムサイズ」から選べます。

Google Mapの表示サイズを変更例
実際に表示サイズ小・中・大で変更した例が下記(横スクロールで閲覧可)
小
中
大
Google Mapの示した場所の表示範囲(首都圏・日本地図)を変更する
見せたい表示範囲をGoogle Map上でスクロールしてから共有を押すと、範囲を変えて表示することができます。表示範囲を変えた2例が下記。
Google Mapで距離や道のりを表示させる方法
Google Mapで目的地までの距離や時間、道のりがわかるとイメージが伝わり親切
その場所に行ってみようと考えた時に、どのくらい時間がかかるのか?どこからどの経路で行けばよいのか?きになると思います。例えば、最寄り駅から対象の場所までのおすすめ順路や、距離を表示させてあげると親切です。結果、実際に行ってみようと決断するきっかけになります。
目的地を東京タワーとして最寄り駅の芝公園駅からの道のりをGoogle Mapで表示させました(下記)これにより、徒歩12分800mの距離であることがわかります。
Webサイト掲載ページのGoogle Mapに目的地までの距離や推定時間が掲載されていれば、訪問者が新たにGoogle Mapで調べる手間が減り、Webページからの離脱も防げます。
目的地まで徒歩で時間がかかるなら、おすすめの交通手段や道のりを伝えるのが親切
お薦めしたい店舗や自分の店舗が最寄り駅から遠く、徒歩では厳しいので道のりを表示させないケースを見ます。不便な立地を隠したい想いとは思いますが、訪問者から見ると不親切に感じます。その場合は徒歩以外の(車・バスなど)のおすすめの道のりを掲載した方がよいでしょう。
目的地の追加設定も可能
Google Mapで使える機能を表示できるので、目的地をいくつが追加した道のりを表示することができます。下記は「芝公園駅→慶応義塾大学→東京タワー」を徒歩で行った場合のケースです。
ご質問やご依頼について
記事やDX化のご質問や依頼はServiceをご覧くださいませ。