GoogleマップをWebサイトに埋め込む方法【最短ルートの表示も解説】

WordPress

GoogleマップをWebサイトに埋め込む方法をお探しの方向け。

 

会社やお店のサイトを公開する際、お客様に所在地を分かりやすく伝えるために、WebサイトにGoogleマップを埋め込み表示させたいとお考えではありませんか?

会社やお店の所在地をGoogleマップで表示させておけば、訪問されるお客様はスマートフォンやタブレットで所在地を簡単に調べる事ができるようになります。

 

ちなみに、この記事を書いている筆者の会社のWebサイトには「アクセスマップ」のページにGoogleマップの埋め込みを使用しています。番地だけ表示させるよりも地図を表示させた方が訪問される方も分かりやすいのは間違いありません。

この記事では、GoogleマップをWebサイトに埋め込む方法を解説します。

スポンサーリンク

GoogleマップをWebサイトに埋め込む手順

GoogleマップをWebサイトに埋め込む手順を解説します。

  • 手順①:Googleマップにアクセスして目的地を設定する
  • 手順②:埋め込み表示用のタグを取得
  • 手順③:Webページに張り付ける(投稿・固定ページ共通)

上記のとおりです。

手順①:Googleマップにアクセスして目的地を設定する

まずはGoogleマップにアクセスして、目的地を設定します。

Google マップ

Googleマップにアクセスすると、画面左上に検索枠が表示されますので、目的地(ピン表示)の場所・名称・住所を入力して検索します。

目的地を検索すると、下図のように左側に目的地の情報が表示されますので、画面左上のハンバーガーメニュー(三本線)をクリックして下さい。

手順②:埋め込み表示用のタグを取得

ハンバーガーメニューをクリックすると、下図のようにメニューが表示されますので、「地図を共有または埋め込む」をクリックします。

ここで、埋め込み表示用のタグを取得します。

下図のように共有設定のポップアップが表示され、「リンクを送信する」、「地図を埋め込む」というタブが表示されますので、「地図を埋め込む」を選択します。

Googleマップの埋め込み用のタグが発行されますので、「HTMLをコピー」をクリックします。

クリックするとタグがコピーされます。

埋め込み用のタグを取得したら、Googleマップを表示させたいページにタグを貼り付けます。

手順③:Webページにタグを張り付ける(投稿・固定ページ共通)

Googleマップを表示させたいページ(投稿・固定ページ共通)を開き、テキストモードにしてからタグを貼り付けます。

プレビューで表示を確認すると、Googleマップが表示されている事が確認できます。

以上で、WebサイトにGoogleマップを埋め込む方法は完了です。

 

GoogleマップをWebサイトに埋め込むその他の設定方法

GoogleマップをWebサイトに埋め込む手順」では、基本的な埋め込み方法を解説しましたが、他の設定方法を2つ紹介します。

  • Googleマップのサイズを変更する方法
  • 最寄駅から最短ルートを表示させる方法

上記のとおりです。

Googleマップのサイズを変更する方法

Webサイトに埋め込み表示させるGoogleマップは、表示サイズを自由に変更する事ができます。

 

Googleマップのタグを表示させる際、タグの左側に「中」と書かれている場所がありますので、ここをクリックすると「小」、「中」、「大」、「カスタムサイズ」の4つからサイズを選択することができます。

各サイズの詳細は次のとおりです。

  • 小:横400px x 縦300px
  • 中:横600px x 縦450px
  • 大:横800px x 縦600px
  • カスタマイズ:自由に設定可能

 

お好みのサイズを選択しましたら、「手順③:Webページにタグを張り付ける(投稿・固定ページ共通)」という項目で解説したとおり、タグを貼り付けるだけで、選択したサイズの地図を埋め込むことができます。

 

ちなみに、カスタムサイズを選択した場合、下図のように好きなサイズを選択することができますので、どんなサイズのテーマにも横幅ピッタリに表示することができます。

「Lightningテーマ」の場合、横幅が758pxなので、上図のように設定すると横幅がぴったりおさまります(縦のサイズは適当で大丈夫です)。

最寄駅から最短ルートを表示させる方法

Googleマップはお店や会社の場所を表示させるだけでなく、最寄駅からの最短ルートや距離を表示させることができます。

 

Googleマップのソースコード表示画面(「地図を埋め込む」画面)で、「ルート」をクリックします。

次に、画面左上の検索蘭に最寄りの駅名を入力します。

駅名を入力するとルートが表示されますので、表示されたら左上のハンバーガーメニュー(三本線)をクリックします

メニューが開きますので「地図を共有または埋め込む」を選択します。

地図を埋め込むを選択します。

タグが表示されますので、「HTMLをコピー」をクリックして、Googleマップを貼り付けたいページに貼り付けます(「テキストモード」にしてから貼り付ける事をお忘れなく)

下図のように表示されれば設置完了です。

 

まとめ

以上、GoogleマップをWebサイトに埋め込む方法を解説しました。

お店や会社の地図をWebサイトに埋め込んでおけば、お店・会社に訪問されるお客様はスマートフォンやタブレットで場所を探しやすくなります。

また、ルート表示を設定することで道順だけでなく距離も表示されるので、訪問されるお客様も分かりやすいと思います。

GoogleマップをWebサイトに埋め込み表示させたいという方は、是非お試しください。

 

 

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました