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

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

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

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

ちなみに、この記事を書いている筆者が運営しているコーポレートサイトの「アクセスマップ」のページに、Googleマップの埋め込みを使用しています。

所在地を記載するだけよりも、地図を表示させた方が訪問される方も分かりやすいのは間違いありません。

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

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

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

上記のとおりです。

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

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

公式サイト：Googleマップ

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

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

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

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

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

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

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

手順③：Webページにタグを貼り付ける（投稿・固定ページ共通）

Webページにタグを貼り付けます。

ブロックメニューを開き、「カスタムHTML」を選択します。

HTMLを貼り付けるブロックにタグを貼り付けます。

上部メニューのプレビューをクリックすると、Googleマップが表示されます。

公開ボタンを押せば、WebページにGoogleマップが表示されます。

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

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

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

上記のとおりです。

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

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

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

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

お好みのサイズを選択したら、「手順③：Webページにタグを貼り付ける（投稿・固定ページ共通）」という項目で解説した手順でタグを貼り付けます。

これで、選択したサイズの地図を埋め込むことができます。

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

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

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

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

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

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

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

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

タグが表示されますので、「HTMLをコピー」をクリックして、Googleマップを貼り付けたいページに貼り付けます。

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

まとめ

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

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

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

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