WordPressにGoogleマップを埋め込む全手順|埋め込みできない時の対処法・おすすめ無料プラグイン3選

2025年4月5日

「店舗情報を地図で見せたい」「アクセスページにGoogleマップを載せたい」と考えたとき、多くの方がつまずくのがWordPressへの地図の埋め込み方法です。特に、表示されない、サイズが合わない、固定ページにうまく設置できないといった問題は非常に多く発生しています。本記事では、Googleマップの基本的な埋め込み方法から、うまく表示されない原因と解決策、おすすめの無料プラグイン3選まで、誰でも実践できる手順でわかりやすく解説していきます。

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

Googleマップから埋め込みコードを取得する手順

Googleマップ（https://maps.google.com）を開く
埋め込みたい場所を検索
左上の「共有」ボタンをクリック
「地図を埋め込む」タブを選択
iframeタグをコピー

このコードをWordPressの「カスタムHTML」ブロックに貼り付けるだけで、基本的な地図表示が可能です。

WordPress 固定ページにGoogleマップを埋め込む方法

固定ページを開く
ブロックエディタで「+」から「カスタムHTML」を選ぶ
Googleマップの埋め込みコードを貼り付ける
プレビューで確認して公開

表示がうまくいかない場合は、後述の「表示されないときの対処法」をご覧ください。

WordPressで地図が埋め込めない原因と対処法

よくある原因と解決策

1. iframeが無効になっている

テーマやプラグインによっては、セキュリティ設定でiframeの使用が制限されている場合があります。その場合は「WP Extra Config」などでiframe許可設定を行うか、プラグインで対応しましょう。

2. ブラウザのキャッシュの問題

古いキャッシュが原因で表示されないことがあります。Ctrl＋F5で更新、またはキャッシュクリアして再読み込みを試しましょう。

3. HTTP/HTTPSの不一致

サイトがHTTPS化されているのに、HTTPの地図コードを貼り付けるとエラーになることがあります。iframeコードのURLが”https://”から始まっているか確認してください。

4. JavaScriptエラーの影響

他のプラグインやテーマのJavaScriptと干渉して地図が表示されないことも。Chromeの開発者ツール（F12）でエラーを確認してみましょう。

地図をより便利にする！おすすめの無料Googleマッププラグイン3選

1. WP Google Maps（日本語対応）

ドラッグ＆ドロップで地図を作成でき、ショートコードで簡単に埋め込み可能。
カスタムマーカーや複数地点の表示にも対応。
日本語にも対応しており、初心者でも使いやすい。

2. MapPress Maps for WordPress

投稿や固定ページにGoogleマップを直接挿入可能。
複数マップ作成、テンプレートカスタマイズが可能。
簡単操作で、表示速度も早いのが特長。

3. Leaflet Map（軽量派向け）

GoogleマップではなくOpenStreetMapをベースにしたプラグイン。
商用利用時のライセンス問題を気にせず使用可能。
シンプルかつ高機能。

Googleマップのサイズ変更やレスポンシブ対応の方法

WordPress Googleマップ埋め込みサイズ変更のコツ

埋め込みコード内のwidth="600" height="450"の数値を変更することで、任意のサイズに調整可能です。また、レスポンシブにしたい場合は以下のようにCSSを使って制御します：

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe src="地図のURL" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen=""></iframe>
</div>

この方法で、スマホやタブレットでも地図が崩れずきれいに表示されます。

よくあるトラブルとQ&A

ワードプレスでグーグルマップが表示されないときは？

原因：iframeブロックの不具合、JavaScriptエラー、HTTP/HTTPSの不一致など
対策：上記の埋め込みチェックポイントを一つずつ検証してみましょう。

地図を複数ページに使いたいときは？

おすすめは「WP Google Maps」プラグインのショートコード機能を使うこと。固定ページや投稿記事に複数設置しても表示の安定性が高く、メンテナンス性も◎。

Googleマップは無料で使えるの？

基本的には無料ですが、Google Cloud PlatformのAPIキー登録が必要です。商用利用やアクセス数が多い場合は制限に達する可能性もあるため注意しましょう。

まとめ：WordPressのGoogleマップ埋め込みは意外と簡単！

Googleマップは、HTML埋め込み or プラグイン利用で手軽に導入可能
表示されないときは、iframe設定・URL形式・JavaScript干渉などをチェック
サイズ変更やレスポンシブ対応もCSS調整で実現可能
無料プラグインを使えば、地図管理も簡単＆便利

WordPressにGoogleマップを設置するだけで、ユーザーの利便性や信頼感が大きく向上します。ぜひ本記事を参考に、あなたのWebサイトにも最適な形で地図を活用してください。