WordPressにGoogleマップを埋め込む方法

WordPressでホームページやブログを運営していると、お店や会社の所在地をGoogleマップで表示したいことがあります。
Googleマップを埋め込んでおくと、訪問者が場所を確認しやすくなり、アクセス案内にも役立ちます。

Googleマップは専用のプラグインをインストールしなくても、簡単な手順でWordPressに表示できます。
この記事では、GoogleマップをWordPressに埋め込む方法をわかりやすく解説します。

1. Googleマップで表示したい場所を検索する

まずは、Googleマップを開き、サイトに表示したい場所を検索します。

検索窓にお店の名前や住所を入力し、地図上に目的の場所が表示されることを確認します。

地図が表示されたら、次の手順で埋め込み用のHTMLコードを取得します。

これで、WordPressに貼り付けるためのコードを取得できます。

次に、Googleマップを表示したい投稿または固定ページを編集します。

これで、Googleマップをページ内に表示できます。

Googleマップから取得できるコードは、次のような形式です。

<iframe
  src="GoogleマップからコピーしたURL"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

※ 上記はコードの構造を示すサンプルです。実際に表示する際は、GoogleマップからコピーしたHTMLコードをそのまま使用してください。

Googleマップを埋め込んだら、PCだけでなくタブレットやスマホでも表示を確認します。

コピーしたコードの width="600" などは、地図の横幅を固定する設定です。画面幅に合わせて表示させたい場合は、横幅を 100% に変更する方法もあります。

<iframe
  src="GoogleマップからコピーしたURL"
  width="100%"
  height="350"
  style="border:0;"
  allowfullscreen=""
  loading="lazy">
</iframe>

※WordPressのテーマや編集環境によって表示方法が異なることがあるため、実際のページで確認してください。

地図がうまく表示されない場合は、次の点を確認してみてください。

※Googleマップの「共有」から取得した埋め込みコードを使う方法と、Google Maps Embed APIを使って独自のURLを作成する方法は異なります。今回紹介した方法では、APIキーを自分で用意する必要はありません。

今回は、WordPressにGoogleマップを埋め込む方法をご紹介しました。手順をおさらいすると、次のとおりです。

プラグインを追加せずに設定できるので、お店や会社のアクセスページを作成するときにも便利です。ぜひ試してみてください。