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

WordPressにGoogleマップを埋め込むだけなら、Googleマップの「地図を埋め込む」で取得したiframeをカスタムHTMLブロックへ貼り付ける方法が簡単です。通常の店舗・会社案内ではAPIキーもプラグインも必要ありません。

この記事では、グーグルマップ埋め込みの基本手順、スマートフォンに合わせるCSS、プラグインやMaps Embed APIが必要になるケース、地図が表示されない場合の対処まで説明します。

WordPressへ地図を埋め込む方法を選ぶ

地図の数と必要な機能で方法を選びます。1拠点のアクセス案内に高機能なプラグインを入れる必要はありません。

方法	向いている用途	APIキー	難易度
Googleマップのiframe	1〜数拠点の所在地をそのまま表示	通常不要	低い
地図ブロック・テーマ機能	テーマが用意した設定画面で表示	機能により異なる	低〜中
地図プラグイン	複数マーカー、店舗検索、独自レイアウト	製品・機能により必要	中
Maps Embed API等	動的な場所指定、検索・経路などを実装	必要	中〜高

住所を示すだけならiframeから始めます。店舗一覧、現在地検索、カテゴリ別マーカーなどが必要になってから、プラグインやGoogle Maps PlatformのAPIを検討すると、設定と保守を増やしすぎずに済みます。

WordPressにGoogleマップを埋め込む手順

Googleマップで埋め込みコードを取得する

1. ブラウザーでGoogleマップを開き、店舗名・会社名・住所を検索する
2. 目的の場所が正しいことを確認し、「共有」を開く
3. 「地図を埋め込む」を選ぶ
4. 小・中・大・カスタムサイズから表示サイズを選ぶ
5. 「HTMLをコピー」でiframeコードをコピーする

同名施設がある場合は、住所、電話番号、地図上のピンを確認してください。施設情報が未登録でも住所検索から地図を埋め込めますが、表示名や口コミを出したい場合はGoogleビジネスプロフィール側の情報も確認します。

カスタムHTMLブロックに貼り付ける

1. WordPressの投稿・固定ページで地図を置きたい位置を開く
2. ブロック追加から「カスタムHTML」を選ぶ
3. コピーしたiframeコードを貼り付ける
4. ブロックのプレビューで地図が表示されるか確認する
5. ページ全体をプレビューし、PCとスマートフォンで確認する

段落ブロックへiframeを貼ると文字として表示されたり、コードが削除されたりする場合があります。必ずカスタムHTMLブロックを使い、ユーザー権限やセキュリティ機能がiframeを許可しているか確認してください。

Googleマップ埋め込みをスマホ対応にする方法

Googleマップからコピーしたiframeには固定の width が入る場合があります。そのままでは狭い画面からはみ出すことがあるため、幅を100%、高さを用途に合う値へ調整します。

iframeの幅を100%に変更する

コード内の width="600" などを width="100%" に変更すると、親要素の幅に合わせやすくなります。高さはアクセス案内なら300〜450px程度を基準に、ページ全体とのバランスを見て調整します。固定の正解値はありません。

縦横比を保つCSSを使う

比率を保って表示したい場合は、iframeをラッパーで囲み、次のようなCSSをテーマの追加CSSなどへ設定します。クラス名はサイト内で重複しない名前にしてください。

<div class="access-map">
  <iframe
    src="Googleマップから取得したURL"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    allowfullscreen>
  </iframe>
</div>

.access-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.access-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

テーマが aspect-ratio に対応したブロック設定を持つ場合は、CSSを増やさずその機能を使えます。スマートフォンでは地図内の操作でページスクロールが止まりやすいため、地図を必要以上に高くしないことも重要です。

プラグインでグーグルマップを埋め込むケース

次のような要件がある場合は、地図プラグインを比較します。

• 複数店舗を1枚の地図へマーカー表示したい
• 店舗一覧と地図を連動させたい
• カテゴリーや地域で絞り込みたい
• 独自アイコン、吹き出し、配色を設定したい
• 投稿やカスタムフィールドの住所から地図を自動生成したい

プラグインを選ぶ際は、対応するGoogle Maps API、APIキーの保存方法、無料版のマーカー数、地図データの移行方法、最終更新とサポートを確認します。地図表示だけでなく、WordPress管理画面に住所や緯度経度をどう保存するかも重要です。

プラグイン停止後にショートコードだけが残る製品もあります。1ページだけの地図ならiframe、サイト全体で地図データを管理するならプラグインというように、将来の変更範囲で選びましょう。

Maps Embed APIでGoogleマップを表示する場合

Google Maps Embed APIは、APIキーを含むURLで地図、場所、検索、経路、ストリートビューなどをiframe表示するための公式APIです。住所や場所IDをプログラム側から切り替える、検索条件を組み立てるといった用途で検討します。

利用時はGoogle CloudプロジェクトでAPIを有効にし、APIキーを作成します。キーは使用するAPIとWebサイトのドメインで制限し、公開リポジトリや記事本文へ無制限の状態で置かないでください。Google Maps Platformの料金・利用条件は変更される可能性があるため、実装時点の公式ドキュメントで確認します。

確認項目	内容
API制限	Maps Embed APIなど必要なAPIだけに限定
アプリケーション制限	HTTPリファラーで自社ドメインに限定
請求・割り当て	公式コンソールで現在の利用条件と使用量を確認
エラー監視	InvalidKeyMapError、RefererNotAllowedMapError等をブラウザーで確認
退職・移管	個人アカウントだけに依存しないプロジェクト管理

Googleマップが表示されない・APIキーが必要なときの対処

地図が表示されない場合は、どの方法で埋め込んだかを先に確認します。Googleマップの共有画面から取得したiframeと、APIキーを使う地図では原因が異なります。

症状	確認内容	対処
iframeコードが文字で出る	ブロック種類	段落ではなくカスタムHTMLへ貼る
空白になる	セキュリティ・CSP・Cookie同意・最適化	コンソールと通信エラーを確認する
スマホで切れる	固定width、親要素、テーマCSS	幅100%またはレスポンシブCSSへ変更
APIエラーが出る	API有効化、キー制限、請求設定、リファラー	Google Cloudの認証情報とエラー名を照合
場所が違う	検索対象、同名施設、ピン位置	正しい住所・場所IDでコードを取り直す

キャッシュを消すだけで直らない場合は、ブラウザーの開発者ツールでiframe通信が遮断されていないか確認します。セキュリティヘッダーやCookie同意ツールを変更する際は、他の外部コンテンツへの影響もテストしてください。

店舗・会社のアクセスページでのGoogleマップ活用

アクセスページでは、地図だけを置くより、来訪者が迷わない情報を文章でも示します。地図を操作できない人や、住所をコピーして別のナビアプリを使う人にも配慮できるためです。

• 郵便番号と正式住所
• 最寄り駅・バス停からの徒歩経路
• 車で来る場合の入口と駐車場
• 建物名、階数、受付場所
• 営業時間と来訪時の注意
• 地図を大きく表示するGoogleマップへのリンク

店舗サイトのページ構成や導線は、店舗ホームページの作り方で全体を整理できます。アクセス案内へ料金表や申込書を掲載する場合は、PDFの埋め込みも別の方法として確認してください。

住所変更時は、WordPressの地図、本文、構造化データ、Googleビジネスプロフィール、SNSの案内を同時に更新します。iframeだけを差し替えて本文住所が古いままにならないよう、更新箇所を一覧化しておくと安全です。

よくある質問

まとめ

WordPressへのGoogleマップ埋め込みは、1拠点の案内ならGoogleマップの共有画面でiframeを取得し、カスタムHTMLブロックへ貼り付ける方法が簡単です。幅を100%にし、PCとスマートフォンで地図の高さと操作性を確認します。

複数店舗、検索、独自マーカーなどが必要な場合だけ、プラグインやMaps Embed APIへ広げます。表示されないときは、ブロック種類、固定幅、外部通信の遮断、APIキー制限を方法別に切り分けましょう。