地図の埋め込みというとHTMLコードの編集をイメージするかもしれませんが、プラグインを使えば管理画面の操作だけで完成します。
この記事でわかること：
- 「WP Go Maps」のインストール〜地図作成の手順
- 作成した地図をページに埋め込む方法
- 地図が表示されないときの対処法
本記事は、無料プラグイン「WP Go Maps」を実際にインストールして地図を作成・埋め込みした手順にもとづいて解説します。初心者の方でも迷わないよう、1ステップずつ画面操作に沿って進めていきます。
（WordPress 7.0 + WP Go Maps v10.1.03 で動作確認済み、2026年7月時点）。
目次
WordPressにGoogleマップを埋め込む2つの方法（前提知識）
WordPressのページにGoogleマップを表示する方法は、大きく2つに分かれます。まずは自分の目的に合うのはどちらかを確認しておきましょう。
1つ目は、Googleマップが提供するiframe埋め込みコードをそのまま貼る方法です。
Googleマップで表示したい場所を開き、「共有」から取得できるiframeコードを、投稿や固定ページのHTMLに貼り付けるだけで済みます。1つの地点をシンプルに表示したいだけなら、この方法が手軽です。
2つ目は、プラグイン（WP Go Maps）を使う方法です。
管理画面から地図を作成し、生成されたショートコードを貼り付けます。コードを直接編集する必要がなく、複数のマーカー（ピン）を立てたり、地図の高さやデザインを調整したりといった管理が管理画面上で完結します。
| 比較項目 | iframe埋め込み | WP Go Maps（プラグイン） |
|---|---|---|
| 設置の手軽さ | ◎ コードを貼るだけ | ○ 地図作成の手順が必要 |
| 複数マーカーの表示 | △ 苦手 | ◎ 得意 |
| デザイン・サイズ変更 | △ コード編集が必要 | ◎ 管理画面で調整 |
| 後からの修正・管理 | △ 都度コードを差し替え | ◎ 管理画面で一括管理 |
この記事では、より柔軟に管理できるプラグイン「WP Go Maps」を使う方法を解説していきます。「WP Go Maps」は有効インストール数30万件以上の定番プラグインで、旧名は「WP Google Maps」です。
STEP1：WP Go Mapsをインストール・有効化する
WordPressの管理画面で左メニューの「プラグイン」→「プラグインを追加」を開き、検索欄に「WP Go Maps」と入力します。検索結果のカードに「WP Go Maps – Google Map, OpenStreetMap, Leaflet Map」（作者：WPGMaps）と表示されていることを確認し、そのカード内の「今すぐインストール」→「有効化」の順にクリックすれば準備完了です。
検索結果には見た目が似た「WP Go Maps Block」という別プラグインも表示されます。有効インストール数30万以上・作者「WPGMaps」の「WP Go Maps – Google Map, OpenStreetMap, Leaflet Map」を選んでください。旧名の「WP Google Maps」で検索しても見つかります。
有効化すると、左メニューに「地図」という項目が追加されます。
STEP2：地図を作成する
プラグインを有効化したら、表示したい地図を作成します。マーカー（ピン）の追加と、表示サイズの設定を行いましょう。
1. 「地図」メニューを開く
左メニューの「地図」をクリックすると、地図の一覧画面が開きます。有効化した時点で「はじめてのマップ」というサンプル地図がすでに1件用意されているので、この地図を編集して進めていきます。一覧の「編集」をクリックしてください。
初めて開いたときは地図の表示エンジン（Google マップ・Leaflet・Zero Costなど）を選ぶ画面が表示されます。
Googleマップの表示にはGoogleのAPIキーが必要です。APIキーを用意していない場合は、キー不要で使える「Zero Cost」または「Leaflet」を選ぶとそのまま地図が使えます。エンジンは後から「設定」タブでいつでも変更できます。
2. マーカーを追加して住所を登録する
「マーカー」タブを開くと、画面上部に「マーカーを追加」という入力欄があります。住所を入力すると候補が表示されるので、該当する住所を選んでください。
複数の店舗やオフィスを表示したい場合は、この操作を繰り返してマーカーをいくつでも追加できます。
3. 地図の高さ・幅・拡大率を設定する
「設定」タブ→「全般」を開くと、地図の「拡大率」「幅」「高さ」を調整できます。
「幅」を「100%」に設定しておくと、ページの表示領域いっぱいに広がりスマホでも見やすくなります。「高さ」はpx（ピクセル）指定のままにするのがおすすめです。テーマによっては高さを%にすると地図が潰れて表示されることがあります。
4. 地図を保存する
マーカーと表示サイズの設定が終わったら、画面右上の「地図を保存」ボタンをクリックして保存します。
［wpgmza id="1"］ のようなショートコードが表示されています。次のSTEPでこれをコピーして使います。
STEP3：作成した地図をページに埋め込む
地図が完成したら、実際に固定ページや投稿に埋め込みます。ショートコードを貼り付けるだけです。
1. ショートコードをコピーする
地図編集画面の上部に表示されているショートコード欄の隣にあるコピーアイコンをクリックします。
2. 固定ページ・投稿に貼り付ける
地図を表示したい固定ページや投稿の編集画面を開き、「コード」タブに切り替えます。テキストエリアに、コピーしたショートコードを貼り付けます。
ショートコードはカッコを含めて正確に貼り付けてください。前後に余計なスペースが入ったり、カッコが欠けたりすると地図が表示されないことがあります。
3. プレビューで表示を確認する
貼り付けたら公開・更新してから、実際のページを開いて表示を確認します。地図が表示され、設定したマーカーが正しい位置に立っていれば成功です。
地図の表示サイズやデザインをカスタマイズする方法
埋め込んだ地図は、見た目や大きさを調整できます。ページのレイアウトに合わせて整えましょう。
高さ・幅・拡大率の変更
地図編集画面の「設定」タブ→「全般」で、「幅」「高さ」「拡大率」の値をいつでも変更できます。幅を「100%」に設定すると、ページの表示領域いっぱいに広がり、スマホでも見やすくなります。高さはpx（ピクセル）で指定するとレイアウトが安定します。
マーカーアイコンの変更
マーカーのアイコンは標準のピン以外にも変更できます（Pro版でさらに多くのアイコンが使えます）。店舗の種類ごとにアイコンを変えると、複数マーカーを表示したときに見分けやすくなります。
変更した設定は「地図を保存」で保存すれば、埋め込み済みのページにも自動で反映されます。ショートコードを貼り直す必要はありません。
Googleマップが表示されない・埋め込みできないときの対処法
「地図が表示されない」「真っ白になる」といったトラブルは、原因を1つずつ切り分けると解決しやすくなります。よくある原因と対処法を紹介します。
1. ショートコードの記法ミスを確認する
最も多い原因が、ショートコードの貼り付けミスです。カッコの欠けや余計なスペース、全角文字への変換などがないか確認しましょう。地図の管理画面から正しいショートコードを再コピーして貼り直すのが確実です。
2. キャッシュの影響を確認する
キャッシュ系プラグインやブラウザのキャッシュが原因で、古い表示が残っているケースがあります。キャッシュを削除（クリア）してから、ページを再読み込みして確認してください。
3. APIキー・ドメイン制限を確認する（Google Mapsエンジン利用時のみ）
表示エンジンに「Google マップ」を選んでいる場合は、GoogleのAPIキーが必要です。APIキーが未登録・無効だったり、ドメイン制限の設定が合っていなかったりすると地図が表示されません。APIキーを使いたくない場合は、「設定」タブから表示エンジンをZero CostやLeaflet（OpenStreetMap）に切り替えると、APIキーなしで表示できます。
4. テーマ・他プラグインとの競合を確認する
テーマや他のプラグインとの相性で地図が表示されないこともあります。ブラウザの開発者コンソール（F12キーで開く）にエラーが出ていないか確認しましょう。切り分けとして、他のプラグインを一時的に停止して表示を確認する方法も有効です。
よくある質問
WordPressでGoogleマップを埋め込むのに料金はかかりますか？
「WP Go Maps」自体は無料プラグインなので、Googleマップの標準表示だけであれば料金はかかりません。より高度な機能を使いたい場合に、別売りのPro版が用意されています。
Googleマップの埋め込みにAPIキーは必要ですか？
無料版はOpenStreetMap（Leaflet）ベースの表示を使えばAPIキー不要です。Google Maps表示を使う場合は、Google Cloud側で請求先アカウント（クレジットカードなど）を登録したうえでAPIキーを取得する必要があります。個人サイトなど利用量が少なければ無料の範囲内でおさまることが多いですが、アクセス数によっては課金が発生することがあります。
スマホでもレスポンシブに表示されますか？
「WP Go Maps」が生成する地図はレスポンシブ対応しており、スマホでも画面幅に合わせて自動調整されます。幅を「100%」に設定しておくと、より見やすく表示されます。
1つの地図に複数のマーカーをまとめて表示できますか？
はい、1つの地図に複数のマーカーを追加し、それぞれに住所や説明を設定できます。複数の店舗や拠点を1枚の地図で案内したい場合に便利です。
地図が表示されない・真っ白になる場合はどうすればいいですか？
ショートコードの記法ミスやキャッシュの影響が主な原因です。詳しくは本記事の「Googleマップが表示されない・埋め込みできないときの対処法」の章をご覧ください。
Googleマップに登録した店舗情報が反映されないのはなぜですか？
これは本記事で扱うWordPressへの埋め込み表示の問題ではなく、Googleビジネスプロフィールなど地図情報側の登録・反映に関する内容です。情報の反映には時間がかかる場合があるため、Google側の登録状況を確認してください。埋め込み表示自体がおかしい場合は上記「表示されない」章をご確認ください。
まとめ
WordPressのページにGoogleマップを埋め込む方法を、無料プラグイン「WP Go Maps」を使って解説しました。
- 1地点だけならiframe、複数マーカーやデザイン調整をしたいならプラグインが便利
- 「WP Go Maps」をインストール・有効化し、「地図」メニューから地図を作成する
- マーカーを追加して「地図を保存」で保存し、表示されたショートコードをページに貼り付ける
- APIキーなしで始めたいならZero CostやLeaflet（OpenStreetMap）エンジンを選ぶ
- 表示されないときは、ショートコードの記法・キャッシュ・APIキー・競合の順に切り分ける
管理画面の操作だけで、お店やオフィスの場所をわかりやすく伝える地図を設置できます。ぜひこの記事の手順どおりに、ページへGoogleマップを埋め込んでみてください。
