マケスク > MEO(Googleマイビジネス) > Googleマップのホームページ埋め込み!ルート付き・複数店舗同時表示もできる

Googleマップのホームページ埋め込み!ルート付き・複数店舗同時表示もできる

この記事では、「Googleマップを自社のホームページに埋め込みたい」という方に向けて、その方法を詳しく解説していきます。

手順はもの凄く簡単ですので、この機会にぜひ挑戦してみて下さい。

また、基本の埋め込みの方法だけではなく

  • 最寄駅からのルートを表示させたGoogleマップを埋め込む方法
  • 近隣のグループ店舗を同時に表示させたGoogleマップを埋め込む方法

上記のような応用方法も合わせてお伝えしますので、自身のサービスに合ったやり方を試して下さい。

📑Googleマイビジネスの運用代行について問い合わせる

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

まずは一番簡単な、基本の埋め込み方法からお話していきます。

Googleマップにログインし、あなたのサービスの名称を入力し検索しましょう。
出てきた検索結果で、あなたのサービスの場所に正しくピンが立っているかどうかを確認します。

次に、左上の三本線(メニュー)をクリックします。するといろいろな項目があらわれますので、「地図を共有または埋め込む」を選んでクリックします。

Googleマップ-地図を共有または埋め込む

共有できるコードがあらわれます。「地図を埋め込む」にタブを切り替えると、ホームページ上に埋め込むコードが取得できます。

好みの大きさを選んだあとに、埋め込みコードをコピーしましょう。

補足

”この地図は自分専用です”という表記の意味を説明します。

Googleマップ上では、自分がお気に入りの場所に印をつけてカスタマイズすることができます。

すると、埋め込みコードを使って世の中のWebサイトに貼り付けられたGoogleマップに、すべてその印が反映されます。Googleマップが貼り付けられているどのサイトを見ても、あなたがカスタマイズした専用の地図が表示される仕組みです。

ただし、カスタマイズした地図はあなたのGoogleアカウントでログインしたときのみ有効で、他の人のGoogleアカウントでログインした時には表示されません。他人にはあなたのお気に入りの場所がバレないということです。

これが”この地図は自分専用です”という表記の意味です。

お店や会社などのビジネスの位置は、Googleマップに登録されていればだれでも見ることができます。なので、「自分専用の地図」というメッセージは気にせずに、埋め込みコードをそのまま使えば大丈夫です。

埋め込みコードのコピーが完了したら、自身のホームページに張り付けていきましょう。

ホームページの編集画面をテキストモード(HTMLモード)にして、取得したGoogleマップの埋め込みコードを好きな位置に貼り付けます。

以上で埋め込みの作業は完了です。

  1. Googleマップで自分のサービスを検索して表示させる
  2. メニューから埋め込みコードを取得する
  3. ホームページのテキストモード(HTMLモード)に埋め込みコードを貼り付ける

基本の埋め込み方法は、以上の3ステップでできてしまいます。

【応用ワザ①】最寄駅からのルートを表示したGoogleマップを埋め込む方法

さて、ここからは先ほどの埋め込み方法を応用した表示方法をお伝えします。。

まず初めに、最寄駅からのルートを表示したGoogleマップを埋め込む方法をお話します。

「場所がちょっと分かりにくく感じる」と言われているお店などは、ルート入りの地図を埋め込むことで位置を確実に伝えることができます。

ルートのスタート地点は好きな場所が指定可能です。

最寄り駅に限らず、あなたのサービスの近くで目立つスポットがあれば設定してみてください。(例 池袋周辺ならサンシャインシティなど)

まずはGoogleマイマップにアクセスします。

Googleマイマップとは、自分好みの地図を作成できる機能のことです。

アクセスできたら、左上の「新しい地図を作成」ボタンをクリックします。

Googlemymaps

日本全体が表示された地図が出てきます。画面左上の「無題の地図」をクリックして、まずは地図の名前を付けましょう。

「最寄駅からのルート」や「お店までの道のり」のような名前を付けると、さらに分かりやすいと思います。

Googlemymaps2

次は、検索窓にあなたのサービスの名称を入力して検索します。

地図が表示されたら、住所や電話番号などが表示されている下の方「地図に追加」をクリックします。

これであなたのサービスの場所が追加されます。

Googlemymaps3

追加された場所のアイコンは、好きな色に変えたり、違う形にしたりできます。

カスタマイズしたい場合はアイコン編集ボタンをクリックして操作してください。

次は、最寄駅からのルートを表示する設定です。

住所や電話番号が書いてある下の「ルート」ボタンをクリックします。

ルートの詳細設定をする欄があらわれます。

Googlemymaps4

ルートを移動する手段(車か?徒歩か?自転車か?など)・ルートの開始地点(最寄駅の名前など)を入力します。

入力し終わると自動的に保存され、ルートが表示された地図が出てきます。

Googlemymaps5

その後、「共有」をクリックしましょう。

作成したオリジナルの地図を誰もが見られるように、公開設定を編集します。

画面が変わったら、アクセスできるユーザーの「変更」をクリックします。

作成した記事を多くのユーザーに見てもらうため、公開範囲を「ウェブ上で一般公開」に直して保存します。

前の画面に戻ります。

再び地図が表示されます。

地図の名前の横の3つの点をクリックしてください。

表示された項目の中に「自分のサイトに埋め込む」というものがあります。

その項目を選んでクリックしましょう。

Googlemymaps8

埋め込みコードが表示されるので、コピーを行って、あなたのホームページのテキストモード(HTMLモード)に貼り付けてください。

すると、こんな地図が埋め込まれるはずです。↓

ここまでが、最寄駅からのルートを表示したGoogleマップを埋め込む方法です。

注意
Googleマイマップで作成した地図は、作成した人のGoogleアカウント内に保存されています。(Googleドライブ内に自動保存) Googleドライブ内に保存された地図を削除してしまうと、ホームページ上の地図もなくなってしまいます。この点を注意してください。

【応用ワザ②】近隣のグループ店舗を同時に表示させたGoogleマップを埋め込む方法

いくつかのグループ店舗を経営していて、それぞれの場所が同じ地域内にあるような場合。

複数店舗を同時に表示させたGoogleマップを埋め込むことができます。

さっそく手順を説明します。

まずはGoogleマイマップにアクセスし、「新しい地図を作成」をクリックします。

地図の名前を決めます。「〇〇市内の店舗一覧」などが分かりやすいでしょう。

まずは1店舗目の店名を検索窓に入力して、検索をします。

店舗の場所が正しく表示されたら、「地図を追加」をクリックします。

アイコンを編集して目立つようにするのもいいでしょう。

Googlemymaps9

次に2店舗目の設定です。

画面上の検索窓に2店舗目の名称を入れて検索します。

すると2店舗目の場所に移動するので「地図を追加」をクリックしてピンを立てましょう。

Googlemymaps10

3店舗目以降の設定も同じです。

店舗名を検索→場所が表示されたら「地図に追加」でピンを立てる

を繰り返して全部登録しましょう。

全店登録できたら、地図の縮尺を調整します。全店舗が地図内に表示されるように、+と-を使って整えてください。

次に「共有」をクリックします。

先に説明した【応用ワザ②】と同じく、公開設定を”自分のみ”から”ウェブ上で一般公開”に変更します。

以上の工程で、ホームページを訪れたすべての人が地図を見ることができます。

Googlemymaps11

地図の名前横の3つの点をクリックし、「自分のサイトに埋め込む」を選びましょう。

表示された埋め込みコードをコピーし、あなたのホームページのテキストモード(HTMLモード)に貼り付けます。すると、下記のような地図が表示されます。↓

これで、近隣のグループ店舗を同時に表示させたGoogleマップを埋め込むことができます。

先ほども説明しましたが、作成したGoogleマイマップは、作成者のGoogleドライブ内に自動保存されています。

誤って消してしまうと、ホームページ上の地図も消えてしまいますので気を付けてください。

まとめ

Googleマップをホームページに埋め込む方法をお伝えしました。

基本のやり方はとても簡単です。

店舗までのルートを表示させたり、複数の店舗を同時に表示させたりする方法も、慣れてしまえばそれほど難しいものではありません。

まず、あなたのサービスの場所はどこなのか?

サービスに興味のある人がスムーズに足を運べるように、あなたのホームページにGoogleマップを表示させてみてください。

また、ホームページを訪問した人にサービスの魅力を100%伝えるには、『Googleストリートビュー(屋内版)』が便利です。

専用の機材を使って撮影・加工をおこなえば、下のような360度バーチャル画像ができあがり、あなたのホームページに埋め込むことができます。

店舗情報の中に、Googleストリートビュー(屋内版)があると、それを見た人の興味が2倍になることが分かっています。※Googleが第三者機関に依頼しおこなった調査にて

インターネット上の次世代の集客ツールとして、Googleストリートビューのこともぜひ知っておいてください。

弊社では、ストリートビューの撮影編集アップのご依頼を受け付けております。

見積もりも行っておりますので、とりあえず金額だけでも知りたいという方でもお気軽にお問い合わせください。

📑Googleマイビジネスの運用代行について問い合わせる

お問い合わせ・ご相談はこちら

MEO対策・ビジネスプロフィール・ストリートビュー・Instagram・LINE・HP/LP制作に関するお問い合わせお待ちしております!

MEO(Googleマイビジネス)
TOPへ