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

Googleマップ

 

こんにちは!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マイマップとは、自分好みの地図を作成できる機能のことです。

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

Googleマイマップ作成

 

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

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

Googleマイマップ 無題の地図 Googleマイマップ 名前

 

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

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

Googleマイマップ検索 Googleマイマップ 地図に追加

 

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

Googleマイマップ 場所の追加

 

追加された場所のアイコンは、好きな色に変えたり、違う形にしたりできます。カスタマイズしたい場合はアイコン編集ボタンをクリックして操作してください。

アイコン編集ボタン

 

次は、最寄駅からのルートを表示する設定です。住所や電話番号が書いてある下の「ルート」ボタンをクリックします。

Googleマイマップ ルートボタン

 

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

ルートを移動する手段(車か?徒歩か?自転車か?など)・ルートの開始地点(最寄駅の名前など)を入力します。入力し終わると自動的に保存され、ルートが表示された地図が出てきます。

Googleマイマップ ルート Googleマイマップ ルート付き

 

ここまで来たら、作業は後半戦です。「共有」をクリックしましょう。作成したオリジナルの地図を誰もが見られるように、公開設定を編集します。

Googleマイマップ 共有

 

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

せっかく作った地図は誰もが見られないと意味がありませんので、公開範囲を「ウェブ上で一般公開」に直して保存します。

Googleマイマップ 公開設定 Googleマイマップ 公開範囲

 

前の画面に戻ります。設定が変わったことを確認して「完了」ボタンをクリックしましょう。

Googleマイマップ 設定

 

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

地図の名前の横の3つの点をクリックしてください。あらわれた項目の中に「自分のサイトに埋め込む」というものがあります。それを選んでクリックしましょう。

Googleマイマップ 名前横メニュー Googleマイマップ 自分のサイトに埋め込む

 

埋め込みコードが表示されます。コピーして、あなたのホームページのテキストモード(HTMLモード)に貼り付けてください。すると、こんな地図が埋め込まれるはずです。↓

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

 

注意!

Googleマイマップで作成した地図は、作成した人のGoogleアカウント内に保存されています。(Googleドライブ内に自動保存)

 

Googleドライブ内に保存された地図を削除してしまうと、ホームページ上の地図もなくなってしまいます。この点を注意してください。

 

 

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

 

いくつかのグループ店舗を経営していて、それぞれの場所が同じ地域内にあるような場合。複数店舗を同時に表示させたGoogleマップを埋め込むことができます。

 

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

 

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

Googleマイマップ作成

 

地図の名前を決めます。画像では「MAP2」となっていますが、「〇〇市内の店舗一覧」などのほうが分かりやすいでしょう。

Googleマイマップ 無題の地図 マイマップ名称

 

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

マイマップ 店舗検索

 

店舗の場所が正しく表示されたら、「地図を追加」をクリックします。アイコンを編集して目立つようにするのもいいでしょう。

マイマップ 地図に追加 マイマップ アイコン変更

 

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

画面上の検索窓に2店舗目の名称を入れて検索します。すると2店舗目の場所に移動するので「地図を追加」をクリックしてピンを立てましょう。

マイマップ 複数店舗 マイマップ 複数店舗登録

 

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

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

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

 

 

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

マイマップ 縮尺

 

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

先に説明した【応用ワザ②】と同じく、公開設定を”自分のみ”から”ウェブ上で一般公開”に変更します。これで、ホームページを訪れたすべての人が地図を見ることができます。

マイマップ 共有 Googleマイマップ 公開設定 Googleマイマップ 公開範囲 Googleマイマップ 設定

 

ここまで来たら、ホームページへの埋め込みまであと少し!

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

マイマップ 地図の埋め込み

 

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

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

 

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

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

 

 

まとめ

 

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

 

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

 

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

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

 

 

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

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

 

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

 

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

 

>>Googleストリートビュー(屋内版)の集客効果をチェックするにはこちら

Googleマップ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です