Googleマップをホームページに埋め込む方法とは？経路案内や複数店舗を表示させる方法も紹介

自社のホームページを運営している事業者の方の中には「Googleマップを自社のホームページに埋め込んで集客に繋げたい」とお考えの方がいらっしゃるでしょう。

本記事ではそういった方に向けて詳しい方法を解説していきます。基本的な手順は簡単なのですぐに始められます。 また、最寄駅からのルートを表示させたマップを埋め込む方法や、近隣のグループ店舗を同時に表示させたマップを埋め込む方法なども併せてご紹介します。
ぜひ最後までご覧ください。

Googleマップの埋め込み機能とは？

Googleマップの埋め込み機能とは、Googleマップの地図情報を共有できるHTMLコードをブログやSNS、Webサイトなどに貼り付けてページの中に地図を表示できる機能のことです。
Googleマップの利用規約に同意することで無料で公開、共有ができます。

マップを埋め込むとユーザーがマップを拡大・縮小や移動などの操作ができます。

Googleマップをホームページに埋め込む3つのメリット

この章ではGoogleマップをホームページに埋め込むメリットについて解説します。
主に以下の3点です。

それでは、それぞれについて解説していきます。

Googleマップの利用者が多い

まず、1つ目はGoogleマップの利用者が多い点です。
DXサービスを運営する株式会社movが行った地図アプリの利用率の調査によると、Googleマップが99％以上も利用されていることが判明しました。

このようにGoogleマップが国内で最も利用されていることから、活用することでたくさんの集客を見込めることが分かります。

来店に誘導しやすくなる

2つ目は来店に誘導しやすくなる点です。
ホームページ内にGoogleマップが表示されていることで、外部サイトに移動せず自社の位置情報を確認することができます。
また、マップを検索するユーザーは購買意欲が高いことから実際の来店へ繋がりやすくなります。

作成費用や維持費がかからない

3つ目は作成や維持する費用がかからない点です。

例えば、外部の業者にマップの作成を依頼する場合、費用がかかるだけでなく、ご自身で画像を用意したり、周辺環境が変わった場合の画像の更新などの手間がかかります。
一方、Googleマップでは自社の位置を表示した地図のURLをコピーして埋め込むだけなので、自社内ですぐに行うことができます。
また、情報の更新もGoogle側で行われるため、常に最新の地図情報をユーザーに提供できます。

Googleマップをホームページに埋め込む方法

Googleマップをホームページに埋め込む方法は2つあります。
主に以下の2通りです。

それでは、それぞれについて解説していきます。

経路案内を表示させる方法

まず、Googleマップの経路案内をホームページに埋め込む方法について解説します。
お客さんから「場所が分かりにくい」という声が多い店舗などは、経路案内の地図を埋め込むことで場所を分かりやすく伝えることができます。

スタート地点は好きな場所が指定可能なので、最寄り駅に限らず、自社の近くで目立つランドマークなどがあれば設定してみてください。（例： 池袋周辺ならサンシャインシティなど）

①Googleマイマップで新しい地図を作成

まずは、自分でカスタマイズした地図を作成できる、Googleマイマップにアクセスし、左上の「新しい地図を作成」をクリックします。

②地図に名前を付ける

日本全体が表示された地図が出てきます。
画面左上の「無題の地図」をクリックして地図に名前を付けます。例えば、「最寄駅からのルート」や「お店までの道のり」など分かりやすいものが良いでしょう。

③自社名を検索

検索窓に自社の名称を入力して検索します。
地図が表示されたら、基本情報が書かれているウインドウ下部の「地図に追加」をクリックします。

ちなみに、アイコンを変更したい場合はアイコン編集ボタンから変更できます。

④最寄駅からのルートを表示

次は最寄駅からのルートを表示します。
住所や電話番号が表示されているウインドウ下の「ルート」ボタンをクリックします。

⑤移動手段とスタート地点を設定

移動手段（車または徒歩、自転車など）とスタート地点（最寄駅の名前など）を入力します。入力すると自動保存され、ルートが表示された地図が完成します。

⑥公開範囲を設定

地図が作成できたら、地図名の下にある「共有」をクリック。公開設定画面にてアクセスできるユーザーを設定します。
今回はGoogleビジネスプロフィールで誰でも見られるようにするため、範囲を一般公開に設定して保存します。

⑦表示された項目から「地図を埋め込む」を選択

保存すると地図の画面に戻ります。地図の名前の横の3点リーダーをクリックします。表示された項目の中の「自分のサイトに埋め込む」を選択します。

表示されたHTMLコードをコピーして自社のホームページやブログに貼り付けて完了です。

近隣の複数店舗を表示させる方法

次に近隣の複数店舗を表示させる方法について解説します。
経営している支店のいくつかが、それぞれ近隣の場所にある場合、複数の店舗を同時に表示させたGoogleマップを埋め込むことができます。
今回は有名な遊園地を例に解説していきます。

①Googleマイマップで新しい地図を作成

Googleマイマップで「新しい地図を作成」をクリックします。地図は「〇〇市内の店舗一覧」など分かりやすい名前で作成しましょう。
まず、1店舗目の店名を検索します。店舗の場所が正しく表示されたら、「地図を追加」をクリックします。

②2店舗目の設定

次に2店舗目の設定です。1店舗目と同じように2店舗目の店名を検索します。
2店舗目の場所に移動し「地図を追加」をクリックしてピンを立てます。

③全ての店舗を登録して地図の縮尺を調整

3店舗目以降も同様に、店名を検索してピンを立てる方法を繰り返して全ての店舗を登録します。
全店舗が登録できたら地図内に表示されるように地図の縮尺を調整します。

④公開範囲を設定

調整が完了したら、地図名の下にある「共有」をクリック。公開設定を”一般公開”に変更します。

⑤HTMLコードをコピーして貼り付ける

保存して地図の画面に戻ります。地図名の横の3点リーダーをクリックし「自分のサイトに埋め込む」を選択。
表示されたHTMLコードをコピーし、自社のホームページやブログに貼り付けて完了です。

Googleマップを埋め込む方法のまとめ

今回はGoogleマップの埋め込み方法について解説してきました。
店舗までのルートを表示させたり、複数の店舗を同時に表示する方法など一見難しそうですが、本記事を参考にしていただければすぐに作成できます。
ぜひ、お客さんがスムーズに足を運べるよう自社のホームページやブログなどにGoogleマップを表示させましょう。

また、自社のサービスをさらに分かりやすく伝える方法として、『屋内版のGoogleストリートビュー』が効果的です。
専用の機材を使って撮影・加工した360度バーチャル画像を自社のホームページに埋め込むことができます。
そして、店舗情報の中に屋内ストリートビューを表示させることで、ユーザーの視覚効果に訴えることができ、さらなる集客に繋がる可能性が高まります。

弊社・株式会社トリニアスでは、Google認定フォトグラファーとして屋内ストリートビューの撮影や編集などのご依頼を受け付けております。
無料でお見積もりを行っておりますので、ぜひお気軽にお問い合わせください。

また、弊社が手がけた屋内ストリートビューの事例集もございますので、こちらもぜひご覧ください。

▶歯科医院の屋内ストリートビュー撮影事例集
▶飲食店の屋内ストリートビュー撮影事例集
▶不動産会社の屋内ストリートビュー撮影事例集
▶学習塾の屋内ストリートビュー撮影事例集
▶美容室・サロンの屋内ストリートビュー撮影事例集