WordPressにGoogleマップを表示したいけど、やり方がよく分からない・・・と感じている人は多いはずです。
この記事では、WordPressでGoogleマップを埋め込む基本的な手順から、プラグインを使う場合のポイント、そして地図がうまく表示されないときの直し方まで、実務でよくある流れに沿ってまとめています。
一言でまとめると、「難しそうに見えるGoogleマップの埋め込みも、手順を押さえればコピペ中心で誰でもきれいに表示できるようになる」というのがこの記事の結論です。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
WordPressでGoogleマップを埋め込みたい人がまず知っておきたいこと
ここでは、WordPressのサイトにGoogleマップを埋め込むと何が変わるのか、そして初心者がどこでつまずきやすいのかを軽く整理しておきます。先に全体像を知っておくと、このあと出てくる手順の意味もつかみやすくなります。
Googleマップ埋め込みで何が変わる？メリットを整理
アクセスページに住所だけが書かれているサイトと、Googleマップが埋め込まれているサイトでは、使い勝手がかなり違います。イメージしやすいように、簡単な表で比べてみます。
| 項目 | 地図なし（住所だけ） | Googleマップ埋め込みあり |
|---|---|---|
| ユーザーの分かりやすさ | 周辺の目印が分かりにくく、迷いやすい | 建物や交差点などが一目で分かり、道順をイメージしやすい |
| スマホでのルート案内 | 自分で地図アプリに住所を入力する必要がある | ワンタップで地図アプリを開き、そのままナビを始められる |
| お店の雰囲気 | テキストだけで少しそっけない印象になりがち | 写真付きの地図で安心感が出て、「ちゃんとしたお店」に見える |
| 来店までのハードル | 道が不安で、別のお店に流れてしまうこともある | 迷う可能性が下がり、来店や来社につながりやすい |
私自身もお店を探すときに、アクセスページに地図がないと「大丈夫かな…」と少し不安になります。逆に、Googleマップがしっかり埋め込まれていると「ここなら迷わず行けそうだな」と感じて、予約ボタンを押すハードルがぐっと下がります。
WordPress初心者がつまずきやすいポイント
一方で、初めてGoogleマップを埋め込もうとすると、次のようなところでひっかかりやすいです。
- Googleマップのどこから「埋め込み用コード」を取ればいいのか分からない
- ブロックエディタとクラシックエディタで操作方法が違うことに気づいていない
- コードを貼ったのに地図が表示されず、四角い枠だけが出てしまう
- スマホで見ると地図が小さすぎたり、逆にはみ出してしまったりする
- プラグインを使うべきか、手動で埋め込んだ方が良いのか判断できない
この記事では、こういった「どこが分からないのか分からない」という状態を、一つずつほどきながら解説していきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
WordPressでGoogleマップを埋め込む4つの方法をざっくり比較
ここからは、WordPressでGoogleマップを表示する主な方法を整理します。最初に選択肢を眺めておくと、自分のサイトに合ったやり方が選びやすくなります。
WordPressでGoogleマップを埋め込む代表的な方法一覧
WordPressでGoogleマップを表示する方法は、大きく分けて次の4パターンがあります。
| 方法 | 難易度 | おすすめ度 | 特徴 |
|---|---|---|---|
| 埋め込みコード（iframe）をコピペ | 低 | 高 | Googleマップ側で発行されるコードを、そのまま貼るだけのシンプルな方法 |
| プラグインで表示 | 中 | 中〜高 | フォーム入力で地図を作れて、複数店舗やデザイン調整がしやすい |
| Googleマイマップを埋め込む | 中 | 中 | 観光ルートや複数のスポットをまとめた「オリジナル地図」を表示できる |
| Google Maps APIを使う | 高 | 低〜中 | 開発者向け。条件検索など高度なカスタマイズが可能だが、コードの知識が必要 |
多くの企業サイトや個人サイトでは、一番上の「埋め込みコードをコピペする方法」か、「シンプルなプラグイン」を使う方法だけで十分です。
どのWordPress向けGoogleマップ埋め込み方法を選ぶべきか
ざっくりとした選び方は、次のイメージで考えると分かりやすいです。
- 店舗や拠点が1つだけで、シンプルなアクセスマップを出したい場合 → 埋め込みコード方式が手軽でおすすめ
- 複数店舗があり、一覧マップや店舗ごとのページを作りたい場合 → プラグインまたはGoogleマイマップ
- 地図上で条件検索をさせたいなど、かなり凝った機能が必要な場合 → Google Maps API（エンジニアに依頼する案件）
私が相談を受けたときも、まずは埋め込みコードでシンプルに表示してもらい、運用していく中で「もっとこうしたい」が出てきたらプラグインを検討する、という流れにすることが多いです。
私ならこう選ぶ：現場目線の結論
私が自分のサイトで地図を出すときは、次のように決めています。
- 個人ブログや、小さなお店のコーポレートサイト → 埋め込みコードをコピペしてサクッと表示
- 複数店舗があるチェーン店や、営業所がたくさんある会社のサイト → プラグインでまとめて管理
- 観光案内やイベントマップのように、ルートや見どころをまとめたい場合 → Googleマイマップでオリジナル地図を作成
この記事では、この後「埋め込みコード」と「プラグイン」の2つを中心に、具体的な手順を解説していきます。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
基本のやり方：Googleマップの埋め込みコードをWordPressに貼る
ここでは、もっともシンプルな「埋め込みコードをWordPressに貼る方法」を紹介します。ブロックエディタとクラシックエディタの両方で手順を説明するので、自分の環境に合わせて読み進めてください。
Googleマップ側で埋め込みコードを取得する手順
まずは、Googleマップの画面から「埋め込み用のコード」を取得します。流れはとてもシンプルです。
- ブラウザでGoogleマップを開く
- 検索窓に店舗名や住所を入力して、目的の場所を表示する
- 画面内に表示される「共有」ボタンをクリックする
- 「地図を埋め込む」タブを選ぶ
- 地図のサイズを選んで、「HTMLをコピー」ボタンを押す
| ステップ | 操作内容 | ポイント |
|---|---|---|
| 1 | Googleマップで住所や店舗名を検索する | できるだけ正式名称で検索すると、ピンの位置がズレにくい |
| 2 | 「共有」をクリックする | 地図のピンが立っている状態で操作する |
| 3 | 「地図を埋め込む」タブを選ぶ | メール共有タブと間違えないように注意する |
| 4 | サイズを選んでHTMLをコピーする | 最初は「中」を選び、必要ならWordPress側で調整すればOK |
ここでコピーしたコードが、いわゆる「iframeタグ」です。このコードをWordPress側に貼り付けるだけで、ページ上に地図が表示されます。
ブロックエディタ（Gutenberg）での貼り付け方法
次に、WordPressのブロックエディタで先ほどのコードを貼り付ける方法を見ていきます。
- WordPressの管理画面で、編集したい固定ページや投稿を開く
- 地図を表示したい位置にカーソルを置く
- 「ブロックを追加」ボタンから「カスタムHTML」ブロックを追加する
- コピーしたGoogleマップのHTMLコードを、そのブロック内に貼り付ける
- プレビューで地図が表示されているか確認する
カスタムHTMLブロックを使うと、余計な装飾が入らず、Googleマップのコードをそのまま表示できます。使う場所ごとに、次のようなイメージで選ぶと分かりやすいです。
| 表示したい場所 | おすすめブロック | 補足 |
|---|---|---|
| 本文中（アクセス本文の途中） | カスタムHTML | もっともオーソドックスで、迷ったらこれでOK |
| ページ最下部のアクセスセクション | カスタムHTML＋見出しブロック | 「アクセス」「所在地」などの見出しを付けると親切 |
| フル幅レイアウトのセクション | グループブロック＋カスタムHTML | 背景色や余白をつけて、地図を目立たせたいときに便利 |
カスタムHTMLという名前だけ聞くと「難しそう」と感じるかもしれませんが、やることはコピー＆ペーストだけです。一度試してみると、拍子抜けするくらい簡単だと思います。
クラシックエディタやウィジェットでの貼り付け方法
クラシックエディタを使っている場合も、基本的な考え方は同じです。
- 編集画面のタブを「ビジュアル」から「テキスト」に切り替える
- 地図を表示したい位置に、Googleマップの埋め込みコードを貼り付ける
- 必要であれば再び「ビジュアル」タブに戻し、地図が表示されているか確認する
サイドバーやフッターに地図を出したいときは、「外観」メニューの「ウィジェット」から「カスタムHTML」ウィジェットを追加し、その中にコードを貼ります。テーマによっては、独自の「アクセス」ウィジェットや「地図」ウィジェットが用意されている場合もあるので、その場合はテーマのマニュアルも確認してみてください。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
プラグインを使ったWordPressへのGoogleマップ埋め込み
ここからは、プラグインを使ってGoogleマップを表示する方法を見ていきます。複数店舗があるサイトや、ちょっと凝ったデザインの地図を作りたいサイトに向いているやり方です。
プラグインを使うメリット・デメリット
プラグインを入れる前に、「自分のサイトに向いているか」をざっくり確認しておきましょう。
| 項目 | メリット | デメリット |
|---|---|---|
| 設定のしやすさ | フォームに情報を入力するだけで地図を作れる | 最初に設定画面の使い方を覚える必要がある |
| 複数店舗の管理 | 店舗ごとの情報を一覧で管理できる | 登録する項目が多いと、整理に手間がかかる |
| デザインの自由度 | ピンの色やアイコンを変えたり、吹き出しを出したりしやすい | テーマとの組み合わせによっては、表示が崩れることがある |
| サイト全体への影響 | ショートコードで、複数ページに同じ地図を簡単に表示できる | プラグインが増えると、サイトが重くなったり不具合の原因になることもある |
プラグインは便利な反面、入れすぎると管理が大変になります。必要なものだけを選び、使わなくなったものは整理しておくと安心です。
代表的なGoogleマップ系プラグインの例
具体的なプラグイン名はテーマや好みにもよりますが、よくあるパターンとしては次のようなものがあります。
- シンプルな地図を1つだけ表示したい → ショートコードで1枚の地図を出す、軽量タイプのプラグイン
- 複数店舗を一覧で見せたい → 店舗情報を複数登録できるタイプのプラグイン
- ピンの色やアイコン、吹き出しなどデザインにこだわりたい → デザイン設定が豊富なプラグイン
どのプラグインでも、基本的な流れはだいたい共通です。
- プラグインをインストールして有効化する
- 管理画面に追加された地図の設定メニューを開く
- 地図の中心位置やズーム、ピンの情報などを入力する
- 自動で発行されるショートコードを固定ページや投稿に貼り付ける
コードを書くのが苦手な場合でも、「プラグインの管理画面で地図を作成→ショートコードを貼る」という流れで、比較的かんたんに地図を出すことができます。
プラグインを選ぶときのチェックポイント
プラグインを選ぶときは、次の項目を見ておくと失敗しづらくなります。
- 最終更新日が極端に古くないか
- 有効インストール数が一定数以上あるか
- 自分のWordPressバージョンに対応していると表示されているか
- レビューで「表示されない」「エラーが多い」といった声があまり多くないか
- 自分の用途に対して、機能が多すぎないか（高機能だと設定も複雑になりやすい）
【稼げるキーワード教えます】
▼ ▼ ▼
私のおすすめは、「まずはシンプルなプラグインから試し、物足りなくなったら機能豊富なものに乗り換える」というやり方です。一度入れてみないと分からない部分も多いので、深く考えすぎず試してみるのも大事です。
デザインと表示速度を両立させるGoogleマップ埋め込みのコツ
この章では、Googleマップをただ埋め込むだけでなく、「見やすさ」と「ページの軽さ」を両立させるためのポイントをまとめます。アクセスページはよく見られるページなので、少しだけ気を配ってあげると印象がグッと良くなります。
レイアウトとサイズの考え方
アクセスページに地図を置くとき、よくある失敗は「大きすぎてスクロールが大変」「逆に小さすぎてよく見えない」といったケースです。私がレイアウトを考えるときに意識しているのは、次のような点です。
- スマホで縦にスクロールしたとき、地図だけが延々と続かないようにする
- 店舗名、住所、電話番号、営業時間などのテキスト情報とセットで見せる
- PCでは横幅いっぱい、スマホでは画面幅ぴったりになるようにする
- 「アクセス」や「店舗情報」の見出しのすぐ下に地図を置き、迷わない位置に配置する
文章だけのページに比べて、地図とテキストのバランスが整っているページは、それだけで「ちゃんと作られているサイト」という印象になります。
レスポンシブ対応とCSSの考え方
Googleマップの埋め込みコードは、そのままだと幅や高さが固定値になっていることがあります。その場合、スマホで見ると地図がはみ出したり、必要以上に小さく表示されたりすることがあります。
基本の考え方は、「横幅は100％、高さは比率で考える」です。イメージをつかみやすいように、次の表にまとめてみます。
| やりたいこと | 考え方 | ヒント |
|---|---|---|
| 横幅いっぱいの地図にしたい | CSSでwidth:100%にする | テーマ側で最初から100%指定になっている場合も多い |
| 高さを適度に保ちたい | 固定値ではなく縦横比で考える | スマホでは少し低めにした方が、スクロールしやすい |
| スマホで地図が小さくなりすぎるのを防ぎたい | 最低限の高さを決める | min-heightを指定する方法もある |
CSSが苦手な場合は、無理にいじらなくても構いません。最近のテーマは、埋め込み用のブロックやクラスが最初からレスポンシブ対応になっていることも多いので、「テーマ名＋Googleマップ」で検索して、作者の説明を軽くチェックしておくと安心です。
表示速度・パフォーマンスを落とさないためにできること
Googleマップは外部サービスを読み込む仕組みなので、たくさん埋め込むとページの読み込みが重くなることがあります。とくにトップページやキャンペーンページなどで地図を多用するときは、次のような工夫を意識してみてください。
- 1ページあたりの地図の数は、必要最低限にとどめる
- 複数の地図が必要な場合は、「メインは地図、ほかの店舗は住所＋リンク」にするなど、見せ方を分ける
- ファーストビューにいきなり大きな地図を置きすぎず、上部はテキストや写真を優先する
- 地図の近くに住所テキストも書いておき、もし地図が読み込まれなくても最低限の情報は伝わるようにしておく
プラグインによっては、「スクロールして地図が見える位置まで来たら読み込む」といった機能を持つものもあります。そうした機能をうまく使うと、トップページでも比較的安心してGoogleマップを活用できます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
トラブル対処とよくあるミスをまとめてチェック
この章では、WordPressでGoogleマップを埋め込んだときに起こりがちなトラブルと、その原因・対処法を整理します。何か問題が起きたときに戻ってこられる「チェックリスト」として使ってもらえればうれしいです。
地図が表示されないときのチェックリスト
「コードを貼ったのに、ページを開くと地図が表示されない」という相談はよくあります。代表的な症状と原因・対処法を表にまとめました。
| 症状 | 考えられる原因 | 対処法の例 |
|---|---|---|
| 真っ白で何も表示されない | 埋め込みコードが途中で切れている、コピー漏れがある | もう一度Googleマップからコードをコピーし直し、全文を貼り付ける |
| 枠だけ表示されて地図が出ない | テーマや別のプラグインでJavaScriptエラーが起きている | プラグインを一時的に停止し、どれが原因か切り分けていく |
| 英語のエラーメッセージが表示される | APIキーが必要なタイプのプラグインを使っている、または設定が不完全 | プラグインのマニュアルどおりにAPIキーを取得・設定する |
| PCでは表示されるがスマホでは崩れる | レスポンシブ対応が不十分、CSSが競合している | テーマの設定やカスタムCSSを見直し、幅や高さの指定を確認する |
単純にiframeをコピペしているだけなら、APIキーが原因になることはあまり多くありません。プラグインを使っている場合は、プラグイン側の設定画面を落ち着いて見直してみてください。
埋め込みが崩れる、スマホで見切れるときの直し方
埋め込みコードが原因でレイアウトが崩れる場合は、次のポイントをチェックしてみてください。
- テーマのコンテンツ幅より大きな幅が、埋め込みコードに指定されていないか
- 余白や枠線など、テーマ側のCSSとGoogleマップのスタイルがぶつかっていないか
- カラムレイアウトの片側にだけ地図を入れていて、幅が狭すぎないか
もしどうしても原因が分からないときは、別のシンプルな固定ページを作って同じコードを貼ってみる、または一時的に標準テーマに切り替えて表示を確認する、という方法で切り分けていくと原因に近づきやすくなります。
Googleマップの利用規約と注意しておきたいポイント
Googleマップの埋め込みを使うとき、意外と見落とされがちなのが「利用規約」です。細かい条文を全部覚える必要はありませんが、次の点だけは意識しておくと安心です。
- Googleマップのスクリーンショットをそのまま画像として保存し、自由に加工して使い回すのは避ける
- 地図データを独自サービスのように再配布するような使い方はしない
- プライバシーポリシーに、第三者サービスとしてGoogleマップを利用していることを一言添えておく
一般的なサイトで、iframeを使って公式の埋め込み機能を利用する範囲であれば、特別難しいことを考える必要はありません。「正式な方法で埋め込む」「勝手な加工をしない」の2点を押さえておけば、大きくずれることはないはずです。
ローカル集客とSEOを意識したGoogleマップ活用
ここからは、単にGoogleマップを埋め込むだけで終わらせず、「集客」と「SEO」の観点でもう一歩踏み込んでみます。とくに実店舗があるビジネスでは、このあたりを整えるかどうかで、検索からの問い合わせ数が変わってきます。
アクセスページで押さえたい情報と文章の書き方
アクセスページを作るときは、地図だけでなく次のような情報もセットで載せておくと親切です。
- 店舗名または会社名（できるだけ正式名称）
- 郵便番号と住所
- 電話番号
- 営業時間や定休日
- 最寄り駅やバス停からの所要時間と簡単なルート説明
文章の書き方のコツとしては、次のような点を意識すると、初めて来る人にも伝わりやすくなります。
- 「〇〇駅から徒歩〇分、△△出口を出て右に曲がってすぐ」など、駅を起点に説明する
- 車で来る人向けに、近くの大通りや目立つ建物を目印として書く
- 駐車場がある場合は、有無だけでなく台数や場所も簡単に書いておく
こうしたテキスト情報と、WordPressで埋め込んだGoogleマップを組み合わせることで、「読んで分かる」「見て分かる」の両方を満たしたアクセスページに近づきます。
GoogleビジネスプロフィールとNAPの話
ローカルSEO（地域名＋業種名で検索されたときの上位表示）を意識するなら、Googleマップの埋め込みに加えて、Googleビジネスプロフィールの整備も重要です。とくに次の3つの情報は、サイト側とできるだけ同じ表記にしておきましょう。
- 店舗名（Name）
- 住所（Address）
- 電話番号（Phone）
この3つをまとめて「NAP」と呼びますが、表記がばらばらだと、検索エンジンが同じ店舗だと認識しづらくなると言われています。
たとえば、会社名の「株式会社」をサイトでは「(株)」と省略していたり、住所の丁目や番地表記がサイトとマップで微妙に違っていたりすると、ぱっと見で分かりづらくなります。できる範囲で構わないので、表記をそろえておくと良いです。
お店・会社の信頼感を高める見せ方
Googleマップを埋め込む目的は、単に地図を出すことだけではなく、「きちんと存在しているお店・会社だ」と感じてもらうことでもあります。信頼感を高めるために、次のような工夫もおすすめです。
- アクセスページに、外観写真や入口の写真を1〜2枚載せる
- 地図の近くに、簡単なお客様の声や口コミを一言添える
- 担当者の名前や顔写真を載せ、「この人が対応してくれる」と分かるようにする
私自身も知らないお店に行くとき、顔写真付きのスタッフ紹介や、分かりやすいアクセスページ、そしてGoogleマップの埋め込みがそろっていると、「ここなら安心して行けそうだな」と感じます。細かい部分ですが、こうした積み重ねが選ばれる理由になっていきます。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
よくある質問（WordPressでのGoogleマップ埋め込み）
最後に、WordPressでGoogleマップを埋め込むときによく聞かれる質問と、その回答をまとめます。
Q. WordPressでGoogleマップを埋め込むとき、埋め込みコードをコピペするだけで本当に大丈夫ですか？APIキーは必要ありませんか？
A. Googleマップの画面から取得した埋め込み用コード（iframe）をそのまま使う場合は、通常はAPIキーを用意しなくても表示できます。一方で、Google Maps APIを使うタイプのプラグインや、地図に独自機能を追加するようなケースでは、GoogleアカウントでAPIキーを発行して設定する必要があります。
Q. プラグインでWordPressにGoogleマップを埋め込むのと、手動で埋め込むのでは、SEOの面で差はありますか？
A. SEOだけを考えると、「プラグインか手動か」という違いよりも、「アクセス情報が整理されているか」「ユーザーにとって分かりやすいページか」という点の方が重要です。住所や店舗名をきちんと書く、見出しや構造を整える、ページの読み込みが極端に遅くならないようにする、といった基本を押さえていれば、どちらの方法でも大きな差はありません。自分やチームが運用しやすい方法を選ぶのがおすすめです。
Q. テーマを変更したら、WordPressで埋め込んでいたGoogleマップが消えてしまいました。どうすればいいですか？
A. テーマを変更すると、ウィジェットエリアの構成や独自のマップ機能がリセットされることがあります。まずは、以前のテーマでウィジェットに埋め込みコードを置いていなかったかを確認し、新しいテーマのウィジェットや固定ページに同じコードを貼り直してみてください。プラグインでショートコードを使っていた場合は、ページ本文にショートコードが残っているか、また新しいテーマでもそのショートコードが正しく解釈されているかをチェックするとよいです。
まとめ：WordPressでGoogleマップ埋め込みを今日から実践しよう
この記事の内容を簡単に振り返ります。
- WordPressでGoogleマップを表示する方法は、埋め込みコード、プラグイン、マイマップ、APIといくつかあるが、多くのサイトではコードのコピペかシンプルなプラグインで十分
- ブロックエディタではカスタムHTMLブロック、クラシックエディタではテキストタブから埋め込むのが基本の流れ
- プラグインを使うと複数店舗やデザイン調整がしやすい一方で、入れすぎると速度低下や不具合の原因になりやすい
- レスポンシブ対応や表示速度、利用規約、ローカルSEOといった周辺のポイントも意識すると、アクセスページとしての完成度が一段上がる
- 地図そのものだけでなく、住所や道順のテキスト、写真やスタッフ紹介などと組み合わせることで、来店につながる安心感を作ることができる
今日からできる最初の一歩としては、自分の店舗名や会社名でGoogleマップを開き、埋め込みコードをコピーして、テスト用の固定ページに貼り付けてみてください。実際にWordPress上でGoogleマップが表示されるのを見て、「意外と簡単だな」と感じられれば、あとはサイズ調整やプラグインの活用など、少しずつステップアップしていけます。あなたのサイトのアクセスページが、初めての人にも安心して来てもらえるページになるきっかけになればうれしいです。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
