「WordPressの記事にGoogleマップを埋め込みたいけど、やり方がわからない…」そんな悩みを抱えていませんか？
お店紹介やイベント会場の案内など、地図を記事に入れたい場面は意外と多いですよね。
結論から言うと、Googleマップの埋め込みはたった2ステップで完了します。
2026年現在のGoogleマップの最新UIに対応した手順はもちろん、WordPressブロックエディタ（Gutenberg）での貼り付け方、さらにはレスポンシブ対応やSEOへの影響まで、この記事で丸ごと解説します。
初心者の方でも5分で終わる作業なので、ぜひ最後まで読んで実践してみてください。
Googleマップをブログに埋め込むメリットとは？
まず、なぜブログ記事にGoogleマップを埋め込むべきなのか、そのメリットを押さえておきましょう。
読者の利便性が大幅にアップする
記事の中に地図が埋め込まれていれば、読者はわざわざ別タブでGoogleマップを開く必要がありません。
記事を読みながらそのまま場所を確認できるので、ユーザー体験が格段に向上します。
たとえば「おすすめカフェ5選」のような記事なら、各お店の紹介セクションに地図があるだけで、読者の満足度はまったく違ってきます。
2026年のGoogleマップはストリートビューやレビュー情報もリッチに表示されるため、埋め込むだけで記事の情報量がグッと増えますよ。
滞在時間とSEO評価の向上が期待できる
地図を操作する読者が増えれば、ページの滞在時間が自然と長くなります。
Googleはユーザーの行動指標も検索順位の参考にしていると言われているため、滞在時間の向上はSEO面でもプラスに働く可能性があります。
また、構造化データと組み合わせれば、ローカルSEO（地域検索）での評価向上も期待できます。
地図の埋め込みは「読者のため」であり「SEOのため」でもある、一石二鳥の施策です。
【ステップ1】Googleマップで埋め込みコードを取得する
それでは実際の手順に入りましょう。
まずはGoogleマップから埋め込み用のHTMLコードを取得します。
場所を検索して共有ボタンを押す
以下の手順で進めてください。
- ブラウザでGoogleマップ（maps.google.com）を開く
- 左上の検索バーに、埋め込みたい場所の施設名・店名・住所などを入力して検索する
- 目的の場所が表示されたら、画面左側の情報パネルにある「共有」ボタンをクリックする
2026年現在のGoogleマップでは、共有ボタンは情報パネル内のアイコン群の中に配置されています。
矢印のようなシェアアイコンが目印です。
「地図を埋め込む」タブからコードをコピーする
共有ボタンをクリックすると、ポップアップウィンドウが表示されます。
- ポップアップ上部の「地図を埋め込む」タブをクリックする
- 地図のプレビューとHTMLコードが表示される
- 地図サイズを選択する（後述）
- 「HTMLをコピー」をクリックしてコードをコピーする
これで埋め込みコードの取得は完了です。
地図サイズの選び方
埋め込む地図のサイズは以下の4種類から選べます。
| サイズ名 | 幅 × 高さ（px） | おすすめ用途 |
|---|---|---|
| 小 | 400 × 300 | サイドバーや補足的な地図 |
| 中 | 600 × 450 | 一般的なブログ記事（おすすめ） |
| 大 | 800 × 600 | 地図メインのコンテンツ |
| カスタムサイズ | 任意の数値 | テーマのレイアウトに合わせたい場合 |
迷ったら「中」を選んでおけば、ほとんどのWordPressテーマで見やすく表示されます。
カスタムサイズを選べば、幅と高さを自由に指定できるので、テーマのコンテンツ幅に合わせて調整することも可能です。
【ステップ2】WordPressの記事にコードを貼り付ける
コードを取得したら、次はWordPressの記事に貼り付けます。
2026年現在、WordPress 6.x系のブロックエディタ（Gutenberg）が主流なので、ブロックエディタでの手順を中心に解説します。
ブロックエディタ（Gutenberg）で埋め込む方法
- WordPressの投稿編集画面を開く
- 地図を挿入したい位置にカーソルを合わせる
- 「＋」ボタンをクリックし、「カスタムHTML」ブロックを選択する
- 表示された入力欄に、先ほどコピーした埋め込みコード（iframeタグ）をそのまま貼り付ける
- 「プレビュー」タブをクリックして、地図が正しく表示されることを確認する
たったこれだけで、記事内にGoogleマップが表示されます。
コードの中身を編集する必要は一切ありません。
コピーしたものをそのまま貼り付けるだけでOKです。
クラシックエディタを使っている場合
まだクラシックエディタを使っている方は、以下の手順で進めてください。
- 投稿の編集画面を開く
- エディタ右上の「テキスト」タブに切り替える（「ビジュアル」タブではなく）
- 地図を挿入したい位置に、コピーした埋め込みコードを貼り付ける
- 「ビジュアル」タブに戻して地図が表示されていることを確認する
注意点として、必ず「テキスト」モードで貼り付けてください。
ビジュアルモードでHTMLコードを貼り付けると、コードがそのまま文字列として表示されてしまいます。
Googleマップ埋め込みをレスポンシブ対応させる方法
デフォルトの埋め込みコードは固定幅で出力されるため、スマホで見るとはみ出したり小さく表示されることがあります。
2026年のWebサイトではモバイルファーストが当然なので、レスポンシブ対応は必須です。
CSSで簡単にレスポンシブ化する方法
埋め込みコードのiframeを以下のようにdivタグで囲み、CSSを追加するだけでレスポンシブ化できます。
HTMLの書き方：
カスタムHTMLブロックに以下のように記述します。
<div class="map-responsive">
<iframe src="コピーしたURL" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
CSSの追加：
外観 → カスタマイズ → 追加CSS、またはお使いのテーマのスタイルシートに以下を追記します。
.map-responsive { position: relative; overflow: hidden; padding-bottom: 56.25%; height: 0; }
.map-responsive iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
これで画面幅に合わせて地図が自動的にリサイズされるようになります。
WordPressプラグインを使う方法
CSSを触るのが不安な方は、プラグインを使う方法もあります。
| プラグイン名 | 特徴 |
|---|---|
| WP Google Maps | マーカーのカスタマイズやルート表示も可能。 無料版でも十分使える定番プラグイン |
| Maps Widget for Google Maps | ウィジェットやショートコードで簡単に地図を挿入できる |
| Flavor（旧flavor Google Maps） | 複数マーカー・カテゴリ分けなど高機能 |
ただし、プラグインを増やすとサイトの表示速度に影響する場合があります。
単に地図を埋め込むだけなら、先ほどのHTML＋CSSの方法がもっとも軽量でおすすめです。
Googleマップ埋め込み時の注意点とよくある質問
地図の埋め込み自体は簡単ですが、いくつか知っておきたい注意点があります。
表示速度への影響と対策
Googleマップのiframeは外部から読み込むため、ページの表示速度に多少の影響があります。
対策としては以下が有効です。
- iframeタグにloading=”lazy”を追加する（遅延読み込み）
- 1ページに埋め込む地図は多くても3つまでにする
- ファーストビュー（最初に見える範囲）にはできるだけ地図を置かない
2026年現在、Googleマップの埋め込みコードにはデフォルトでloading=”lazy”が含まれているので、通常はそのまま使えば問題ありません。
APIキーは必要？無料で使える？
よくある質問として「Googleマップの埋め込みにAPIキーは必要ですか？」というものがあります。
結論、iframeでの埋め込みにはAPIキーは不要で、完全に無料で使えます。
APIキーが必要になるのは、JavaScript APIを使ってカスタムマップを作成する場合のみです。
この記事で紹介している「共有→埋め込みコードをコピー」の方法なら、Googleアカウントさえあれば追加費用は一切かかりません。
AIツールを活用した地図埋め込みの効率化
2026年はAIツールを活用することで、地図の埋め込み作業をさらに効率化できます。
たとえばChatGPTやClaudeに「〇〇の場所のGoogleマップ埋め込みコードをレスポンシブ対応で書いて」と依頼すれば、div囲みやCSS込みのコードを一発で生成してくれます。
複数の地図を埋め込む記事を書く場合や、カスタムサイズで統一したい場合に特に便利です。
ただし、AIが生成するURLはダミーの場合があるので、埋め込みコード自体は必ずGoogleマップから取得してくださいね。
まとめ
WordPressの記事にGoogleマップを埋め込む方法を解説しました。
最後に要点を振り返りましょう。
- Googleマップの埋め込みはたった2ステップ：コードを取得 → 記事に貼り付けるだけ
- Googleマップで場所を検索 →「共有」→「地図を埋め込む」→ HTMLをコピー
- WordPressのブロックエディタでは「カスタムHTML」ブロックにコードを貼り付ける
- クラシックエディタの場合は「テキスト」モードで貼り付ける
- スマホ対応にはCSSでのレスポンシブ化がおすすめ
- iframeでの埋め込みならAPIキー不要・完全無料
- 地図サイズは迷ったら「中（600×450）」を選べばOK
地図の埋め込みは一度覚えてしまえば、どんな記事にもすぐ応用できます。
お店紹介・旅行記・イベントレポートなど、場所の情報がある記事では積極的に活用してみてください。
読者にとって「わかりやすい記事」になること間違いなしですよ。
