WordPressにGoogleマップを埋め込む方法|プラグイン活用ガイド
目次
この記事の結論
WordPressにGoogleマップを埋め込むには、Googleマップの共有機能から埋め込みコードを取得し、ブロックエディターの「カスタムHTML」ブロックやクラシックエディターの「テキスト」モードに貼り付けるだけで実装できます。コードを書かずに3ステップで設置でき、WP Go MapsやMapPressなどのプラグインを使えばさらに簡単にマップを管理できます。マップの埋め込みはユーザーの利便性向上、ローカルSEOの強化、店舗集客の競争優位性につながります。
生徒ペン博士！お店のホームページを作ってるんですけど、アクセスページに“Googleマップ”を入れたいんです！でも、WordPressでどうやってマップを埋め込むのかが分からなくて…
ペン博士おお、それは良い考えじゃ。マップがあると、ユーザーが場所をすぐ確認できるし、信頼性も上がるのう。今回は“埋め込みコードを使う方法”と“プラグインを使う方法”の両方を紹介していこうじゃないか。
生徒はい！よろしくお願いします！
WordPressサイトにGoogleマップを埋め込むことは、ユーザーに地理的情報を提供し、ビジネスの信頼性を向上させる最適な方法です。この記事では、Googleマップの埋め込み手順、カスタマイズオプション、おすすめプラグインについて詳しく解説します。
詳しくはこちらの記事をご覧ください。
あわせて読みたい
【子育てママさん必見】「在宅×副業」を達成！多方向で活躍中のママさんフリーランスにインタビュー！
ペン博士、ママさんなのに在宅で副業もこなしている方がいるって聞いたんですけど、本当ですか？だとしたらすごすぎます！ うむ、うちの受講生でな、まさに“時間も場所…
菅井さんの主な制作実績はこちら
WordPressにGoogleマップを埋め込む3つのメリット
ペン博士Googleマップを埋め込むことには多くの利点があります。以下にその主な目的を挙げよう。
1. ユーザーの利便性の向上
地理的情報を簡単に取得できるため、ユーザー体験が向上、オフィスの所在地や連絡先情報が明確に表示されることで、ユーザーが迷うことなく目的地に到達できます。
特に、初めて訪問するユーザーにとっては、具体的な地図があることで安心感が増し、サイトの信頼性が向上します。また、地図のインタラクティブな機能を活用することで、ユーザーはルート検索や周辺情報の確認が容易になります。
2. SEOの強化
Googleマップをサイトに埋め込むことで、ローカルSEOが強化され、検索エンジンのランキングが向上する可能性があります。特にローカルビジネスにおいては、地理的な検索結果で上位に表示されることが重要です。
Googleはローカル検索において、地理的な関連性を重視するため、Googleマップの埋め込みは検索結果の上位表示に近づくための大きな要因の一つになります。
3. ローカルビジネスの競争優位性
ローカルビジネスにとって、Googleマップの埋め込みは非常に有益です。顧客が店舗やオフィスの場所を簡単に確認でき、直接ナビゲーションを利用することができます。
これは、特に新規顧客を獲得する際に重要です。地図を埋め込むことで、顧客はビジネスの物理的な存在を確認でき、訪問の計画を立てやすくなります。また、地図上に周辺のランドマークやアクセス方法を表示することで、初めて訪れる顧客にも分かりやすく案内できます。
生徒なるほど、ただ地図を表示するだけじゃないんですね！
ペン博士そうじゃ。店舗情報やアクセスを明確に見せることで、ユーザーに安心感を与えられるのじゃ。
コード不要|WordPressでGoogleマップを埋め込む3ステップ
ステップ1 : 表示させたいエリアをGoogleマップで表示する
まず、Googleマップを開き、表示させたいエリアを検索します。地図を適切なズームレベルに調整し、見たい場所が画面に表示されるように調整しましょう。具体的には、次の手順で行います。
1. Googleマップを開く
ブラウザでGoogleマップ（https://maps.google.com）を開きます。
2. 目的の場所を検索
検索バーに表示させたい場所の住所や名前を入力し、エンターキーを押します。
3. 地図を調整
地図が表示されたら、ドラッグして位置を調整し、ズームインやズームアウトして最適な表示にします。特にビジネスの所在地やイベント会場など、特定のポイントが明確に表示されるようにしましょう。
ステップ2 : Googleマップの埋め込みコードを取得する
次に、Googleマップから埋め込みコードを取得します。以下の手順で簡単に取得できます。
1. 「共有」をクリック
地図の左側にある共有アイコンをクリックします。
2. 「地図を埋め込む」を選択
共有ダイアログが表示されたら、「地図を埋め込む」タブをクリックします。
3. 地図のサイズを選択
「地図を埋め込む」をクリックすると、以下の画面が表示されます。左上から地図のサイズを選択できるので、「大」、「中」、「小」または「カスタムサイズ」から選びましょう。
「カスタムサイズ」を選んだ場合は、ご自身で縦横のサイズを設定することが可能です。「実サイズでプレビュー」をクリックすると、設定したサイズの表示を確認できます。
4. 埋め込みコードをコピー
表示された埋め込みコードの右側の「URLをコピー」をクリックして、リンクをコピーします。
ステップ3: WordPressにGoogleマップを埋め込む
取得した埋め込みコードをWordPressに貼り付けて、地図を表示させます。地図を表示するには主に、「ブロックエディター」と「クラシックエディター」を使用する方法があります。
それぞれのエディターに応じた手順を解説します。
ブロックエディター (Gutenberg) を使用する場合
1. 投稿またはページの編集画面を開く
WordPressのダッシュボードから、編集したい投稿またはページを選択します。開いたら、エディター画面の左上にある「＋」アイコンをクリックします。
2. ブロック選択画面で「すべて表示」をクリック
追加する新しいブロックの選択画面が表示されます。「すべて表示」をクリックして見えていない選択肢を表示します。
3. 「カスタムHTML」ブロックを選択
ブロックメニューから「カスタムHTML」ブロックを選択します。
4. 埋め込みコードを貼り付ける
HTMLブロックが挿入されたら、コピーした埋め込みコードを貼り付けます。
5. プレビューで確認
ブロックのプレビューを確認し、地図が正しく表示されていることを確認します。
クラシックエディターを使用する場合
1. 投稿またはページの編集画面を開く
WordPressのダッシュボードから、編集したい投稿またはページを選択します。開いたら、エディター画面の上部にある「テキスト」タブをクリックして、HTMLモードに切り替えます。
2. 埋め込みコードを貼り付ける
適切な位置にコピーした埋め込みコードを貼り付けます。
3. 「プレビュー」で表示を確認する
ページ右側の「プレビュー」ボタンをクリックして、地図が正しく表示されていることを確認します。
生徒意外と簡単に埋め込めるんですね！3ステップで終わるとは！
ペン博士そうじゃろう。Googleマップの“共有機能”を使えば、専門知識がなくてもできる。ただし“幅と高さの調整”を忘れるでないぞ。スマホ表示でも崩れぬようにの。
Googleマップの埋め込み後|カスタマイズ方法5選
ペン博士ここでは、Googleマップをさらにカスタマイズして、サイトに最適な表示にする方法を紹介するぞ。
マップのサイズや表示スタイルの調整
埋め込みコード内の「width」や「height」の値を変更して、マップのサイズを調整します。サイズの選択で「カスタムサイズ」を選択しなかった場合でも、後から必要になった場合はこちらの値で地図サイズ変更が可能です。
カスタムマップの作成と埋め込み
Googleマイマップを使用してカスタムマップを作成し、埋め込むことも可能です。独自のマップを作成して、特定のルートやポイントを強調できます。以下の手順でカスタムマップを作成します。
1. Googleマイマップを開く
ブラウザでGoogleマイマップ（https://www.google.com/mymaps）を開きます。
2. 新しい地図を作成
左上の「新しい地図を作成」ボタンをクリックします。
3. 地図に名前を付ける
タイトル部分をクリックして、地図のタイトルと説明を入力します。
4. ポイントを追加
左上のアイコンの中から「マーカーを追加」を選択します。その後、任意の場所をクリックして地図上にピンを追加し、各ポイントに名前や説明を入力します。
5. ルートを追加
「ルートを追加」アイコンを押して、指定したポイント間のルートを作成します。
新たに開いた「無題のレイヤ」のA、Bの空欄に、先ほど追加したポイントの名前を入力する。候補にポイントが出てきたら選択する。
すると、ABポイント間のルートが入った地図ができあがる。
6. 地図を公開
地図が完成したら、「共有」をクリックし、地図の公開設定を行います。「共有」が見つからない場合は、左上の地図タイトルをクリックし、「保存」を押してから再度確認してください。
7. 埋め込みコードを取得
タイトル右のメニューを開き、「自分のサイトに埋め込む」を選択します。「埋め込みコードを取得」を選択し、表示されたコードをコピーしてワードプレスサイトに貼り付けます。
生徒独自のマップも作れるんですか！？ちょっと楽しそうです！
ペン博士うむ。特定の場所を表示したい場合は非常に便利な機能じゃ。
WordPressおすすめプラグイン4選を比較解説
ペン博士ここでは、Googleマップを簡単に埋め込むためのおすすめプラグインを紹介するぞ。
1. WP Go Maps
- 主な機能：簡単にカスタムマップを作成・埋め込み可能。複数のマップやマーカーをサポートしています。デザイン性の高さと使いやすさから非常におすすめのプラグインです。
- 無料版と有料版の違い：無料版では1つしか地図が作成できません。有料版では複数の地図が作成できるほか、より多くのカスタマイズオプションが利用可能。例えば、複数のマーカー、ポリライン、ポリゴンなどの追加機能があります。
- 評価：高評価が多く、使いやすさが評判。ユーザーインターフェースが直感的で、初心者でも簡単に利用できます。
WordPress.org 日本語
WP Go Maps – Google Map, OpenStreetMap, Leaflet Map
The easiest to use WordPress map plugin! Create a custom map, map block, store locator or map widget with high quality markers.
2. MapPress Maps for WordPress
- 主な機能：シンプルな地図を簡単。カスタマイズ可能なマーカー。ショートコードを使用して、投稿やページに簡単にマップを挿入できます。
- 無料版と有料版の違い：無料版でもマップの数には制限がありません。
有料版では追加のマップスタイルやカスタマイズオプションが利用可能。例えば、カスタムアイコンの使用やフィルタリングオプションが含まれます。 - 評価：MapPress Maps for WordPressは、投稿画面で地図の埋め込みを簡単に行えるように設計されています。プラグインを有効にすると、投稿画面に地図を埋め込むための専用入力フィールドが追加されます。住所を検索してそのまま記事に埋め込むことで、簡単に地図を作成および表示できるのが強みです。
WordPress.org
MapPress Maps for WordPress
MapPress is the easiest way to add unlimited interactive Google and Leaflet maps to WordPress.
3. Maps Widget for Google Maps
- 主な機能：ウィジェットエリアに簡単にマップを埋め込み可能で、ウィジェット内で直接マップの設定を行うことができます。ロード時間が速いことも特徴です。
- 無料版と有料版の違い：有料版ではフルスクリーンモードやカスタムマーカーが利用可能。さらに、ウィジェットの外観をカスタマイズするための追加オプションが含まれます。
- 評価：
Maps Widget for Google Mapsは、サイトカラーや好みに合わせて地図をカスタマイズできる高い自由度が特徴です。豊富なカスタム項目があり、無料版でも十分以上に活用できます。
WordPress.org 日本語
Maps Widget for Google Maps
Are your Google Maps slow? Try Map Widget for Google Maps. You'll have a fast Google Maps widget with a thumbnail & lightbox map in minutes!
4. MapGeo
- 主な機能：カスタムマーカーや国ごとのカラーが利用可能で、広い範囲の地図を利用したい場合におすすめです。また、地図上にデータレイヤーを追加して、統計情報やその他のデータを視覚的に表示できます。
- 無料版と有料版の違い：無料版でも数の制限なく地図の作成が可能です。
有料版では追加のデータレイヤーやフィルタリングオプションが利用可能。より高度なデータビジュアライゼーション機能が含まれています。 - 評価：ビジュアルに優れた地図を作成したいユーザーに最適です。シンプルで直感的な操作、高いカスタマイズ性と多機能性のほか、優れたサポートと迅速な対応も好評です。
WordPress.org
MapGeo – Interactive Geo Maps
Create interactive vector maps of the world, continents, any country in the world and specific regions, including individual US state county maps.
プラグインの導入方法や導入する際の注意点についてはこちらの記事をご確認ください。
WithMedia
WordPressプラグイン14選|2026年版必須ツール完全ガイド
この記事では、WordPressをより便利にするおすすめプラグインについて解説します。これらの機能を使用することで、初心者でもプロフェッショナルなサイトを簡単に作成でき...
生徒プラグインを使えば、コードを書かなくてもマップが設置できるんですね！
ペン博士そうじゃ。『WP Go Maps』や『MapPress』などは特に人気じゃな。機能が豊富な分、サイトの速度にも影響するから、必要な機能だけを選んで使うのじゃ。
GoogleマップをWordPressに埋め込む際のよくある質問
- マップが正しく表示されない場合はどうしたらいいですか？
-
以下の3つの方法を試してみてください。
- キャッシュのクリア：ブラウザのキャッシュをクリアして、最新のデータを読み込むようにします。
- プラグインの競合確認：他のプラグインとの競合が原因で表示されないことがあるため、一時的に他のプラグインを無効にして確認します。
- コードの再取得：埋め込みコードに誤りがある場合があるため、再度Googleマップからコードを取得します。
- 複数のマップを埋め込む方法はありますか？
-
以下の手順でマップを埋め込みます。
- 各マップのコードを取得：表示させたい各場所ごとに埋め込みコードを取得します。
- コードを別々に貼り付け：WordPressの投稿やページに各マップの埋め込みコードを個別に貼り付けます。ブロックエディターを使用する場合は、各マップごとに新しいHTMLブロックを追加します。
- モバイル対応について注意することはありますか？
-
以下の内容を実施し、モバイルでの見え方を確認してください。
- レスポンシブデザインの採用：前述のCSSを使用して、マップが画面サイズに応じて自動的に調整されるようにします。
- プレビューの確認：モバイルデバイスでマップの表示を確認し、必要に応じて調整します。特に、タッチ操作がスムーズに行えるかを確認します。
生徒無事にGoogleマップを埋め込めました！ しかも、プラグインを使ったら超ラクでした！
ペン博士ふふ、そうじゃろう。WordPressは“コードを触らなくてもプロっぽく見せられる”のが強みじゃ。デザインやマーカーのカスタマイズもできるから、今後は“見せ方”にもこだわってみるとよいぞ。
生徒なるほど！次はオリジナルデザインのマップにも挑戦してみます！ありがとうございました！
まとめ：WordPressでGoogleマップ埋め込みを実装しよう
Googleマップの埋め込みは、WordPressサイトにおいて訪問者に地理的情報を提供し、信頼性を向上させる効果的な方法です。正しい手順とカスタマイズオプションを活用することで、ユーザーエクスペリエンスを向上させ、SEOを強化することができます。また、おすすめのプラグインを利用することで、さらに簡単にマップを埋め込むこともできます。
ぜひ、この記事を参考にして、ご自身のサイトにGoogleマップを埋め込んでみましょう。質問やフィードバックがあれば、コメント欄でお知らせください。
関連記事
- WordPressとDiscordを連携させるには？効果的な統合方法を解説
- WordPressのカスタム投稿とは？プラグイン「Custom Post Type UI」で実装する方法を徹底解説！
- WordPress プロフィール登録機能の実装方法｜コード例付き完全ガイド
- WordPress引用ブロックの使い方｜設定からデザイン変更まで完全ガイド
- WordPressアイキャッチ画像の設定方法|完全ガイド
参考リンク（公式・一次情報）
よくある質問（FAQ）
Q1. WordPressにGoogleマップを埋め込む手順は？
A. まずGoogleマップで表示したいエリアを検索・調整し、「共有」から「地図を埋め込む」を選んでコードをコピーします。次にWordPressのブロックエディターで「カスタムHTML」ブロックを追加し、そこにコードを貼り付けます。クラシックエディターの場合は「テキスト」タブでHTMLモードに切り替えて貼り付けます。
Q2. Googleマップを埋め込むメリットは何ですか？
A. ユーザーが店舗やオフィスの場所をすぐに確認でき、利便性と安心感が向上します。またローカルSEOが強化され、地理的な検索結果で上位表示されやすくなる可能性があります。特にローカルビジネスでは、新規顧客が訪問計画を立てやすくなり競争優位性につながります。
Q3. Googleマップ埋め込みにおすすめのプラグインは？
A. 記事では WP Go Maps、MapPress Maps for WordPress などが紹介されています。WP Go Mapsは直感的なインターフェースで初心者でも簡単に使え、無料版でも1つの地図が作成できます。有料版では複数の地図やマーカー、ポリラインなどのカスタマイズが可能になります。
Q4. マップが正しく表示されないときはどうすればいいですか？
A. まずブラウザのキャッシュをクリアして最新データを読み込みます。次に他のプラグインとの競合が原因の場合があるため、一時的に他プラグインを無効化して確認します。それでも直らない場合は、埋め込みコードに誤りがある可能性があるので、再度Googleマップからコードを取得してみてください。
Q5. スマホでマップが崩れないようにするには？
A. レスポンシブデザインに対応したCSSを使用し、画面サイズに応じてマップが自動調整されるようにします。埋め込み後はモバイルデバイスで実際の表示を確認し、タッチ操作がスムーズに行えるかもチェックしましょう。埋め込みコード内のwidthやheightの値で後からサイズ調整も可能です。
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
