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

この記事では、「Googleマップを自社のホームページに埋め込みたい」という方に向けて詳しく解説していきます。基本的な手順は簡単なのですぐに始められます。
また、基本的な埋め込み方法だけではなく、最寄駅からのルートを表示させたマップを埋め込む方法や、近隣のグループ店舗を同時に表示させたマップを埋め込む方法なども併せてご紹介します。

ぜひ本記事を参考に自社のサービスにご活用ください。

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

最初に基本的な埋め込み方法についてです。今回は弊社・株式会社トリニアスを例に解説していきます。

①Googleマップにログインして自社の会社名を検索

まず、Googleマップにログインし自社の会社名を検索します。

②検索結果で自社の住所に正しくピンが立っているかを確認

次に検索結果で自社の住所に正しくピンが立っているかを確認します。

③Googleビジネスプロフィールの右端にある「共有」をクリック

Googleビジネスプロフィールの右端にある「共有」をクリックします。

④表示されたウインドウから「地図を埋め込む」をクリック

表示されたウィンドウから「地図を埋め込む」をクリックします。

⑤HTMLコードをコピー

HTMLコードをコピーします。

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

Googleマップの経路案内をホームページに埋め込む方法

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

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

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

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

②地図に名前を付ける

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

③自社名を検索

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

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

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

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

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

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

⑥公開範囲を設定

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

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

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

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

近隣の複数店舗を表示させたGoogleマップをホームページに埋め込む方法

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

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

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

②2店舗目の設定

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

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

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

④公開範囲を設定

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

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

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

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

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

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

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