WordPressにGoogleマップを埋め込む方法｜プラグインなし・API不要で簡単表示

はじめに

WordPressで店舗サイトや会社サイト、ブログのアクセス案内ページを作るとき、「ワードプレスグーグルマップの埋め込み方法がわからない」「APIキーやプラグインが必要なのでは？」と迷う方は多いです。

結論からいうと、住所や店舗所在地を表示するだけなら、WordPressにGoogleマップを埋め込む作業はとても簡単です。Googleマップの共有機能から埋め込み用HTMLコードをコピーし、WordPressのカスタムHTMLブロックに貼り付けるだけで表示できます。

専門的なコード編集、Google Maps APIの設定、課金設定、プラグインの追加は基本的に不要です。この記事では、WordPressにGoogleマップを埋め込む基本から、ブロックエディター・クラシックエディター別の手順、スマホ対応、表示されないときの対処法までわかりやすく解説します。

1. WordPressにGoogleマップを埋め込む前に知っておきたい基本

1-1. Googleマップを埋め込むとできること

WordPressにGoogleマップを埋め込むと、サイト訪問者がページ上で店舗や会社の場所を確認できるようになります。地図をクリックすればGoogleマップ上で詳細を開けるため、来店前の場所確認やルート検索にもつなげやすくなります。

たとえば、以下のような情報をページ内でわかりやすく案内できます。

・店舗や会社の所在地
・最寄り駅からの位置関係
・周辺道路や目印
・駐車場や近隣施設の場所
・ルート案内への導線

住所をテキストだけで掲載するよりも、地図があるほうがユーザーは直感的に場所を把握できます。特に実店舗、クリニック、美容室、飲食店、士業事務所、教室、宿泊施設などでは、アクセスページにGoogleマップを設置することで利便性が高まります。

1-2. プラグインなし・API不要で表示できる理由

WordPressにGoogleマップを表示する方法にはいくつかありますが、もっとも簡単なのはGoogleマップの「共有」機能で発行される埋め込み用HTMLを使う方法です。

Googleのヘルプでも、パソコン版Googleマップで場所やルートを共有する際、ウェブページで共有する場合は「地図を埋め込む」から「HTMLをコピー」する手順が案内されています。

この方法では、WordPress側に専用プラグインを追加する必要がありません。また、Google CloudでAPIキーを取得したり、請求先アカウントを設定したりする必要もありません。

つまり、一般的な店舗地図や会社所在地を表示するだけなら、「Googleマップで地図を開く」「埋め込みコードをコピーする」「WordPressに貼り付ける」という流れで十分です。

1-3. iframe埋め込みとプラグイン・API利用の違い

WordPressでGoogleマップを表示する方法は、大きく分けると以下の3つです。

1つ目は、iframe埋め込みです。Googleマップの共有機能から取得できるHTMLコードを貼り付ける方法で、初心者にもっともおすすめです。APIキー不要、プラグイン不要で、住所や店舗名の地図を簡単に表示できます。

2つ目は、Googleマップ系プラグインを使う方法です。複数店舗の管理、ピンのカスタマイズ、地図デザインの変更、店舗一覧との連動などを行いたい場合に向いています。ただし、プラグインの設定や更新管理が必要になります。

3つ目は、Google Maps APIを使う方法です。地図の細かなカスタマイズ、検索機能、独自マーカー、ルート計算、データベース連携などを実装したい場合に使います。Google Maps Embed APIでは、place、view、directions、streetview、searchなどのモードを指定できますが、利用にはAPIキーが必要です。

単にWordPressにGoogleマップを表示したいだけなら、まずはiframe埋め込みから試すのがよいでしょう。

1-4. 店舗・会社・アクセスページで地図が必要なケース

Googleマップの埋め込みが特に役立つのは、ユーザーが実際に現地へ向かう可能性があるページです。

たとえば、以下のようなページでは地図を掲載しておくと便利です。

・会社概要ページ
・アクセスページ
・店舗紹介ページ
・予約ページ
・お問い合わせページ
・イベント会場案内ページ
・採用ページの勤務地案内

「住所」「最寄り駅」「営業時間」「電話番号」だけでも基本情報としては成立しますが、地図があることでユーザーの不安を減らせます。スマホで閲覧しているユーザーなら、そのままGoogleマップを開いて経路を確認できるため、来店や訪問までの流れもスムーズになります。

2. WordPressにGoogleマップを埋め込む一番簡単な方法

2-1. Googleマップで住所や店舗名を検索する

まず、パソコンでGoogleマップを開きます。検索窓に、WordPressに表示したい住所や店舗名を入力してください。

店舗や施設がGoogleマップ上に登録されている場合は、店舗名で検索するのがおすすめです。店舗名で埋め込むと、地図上に店舗情報や口コミ、営業時間などが表示される場合があります。

一方、Googleマップ上に店舗情報が登録されていない場合は、住所を検索して表示します。会社や店舗の正式名称で正しく表示されない場合は、住所で検索したほうが確実です。

2-2. 「共有」から埋め込み用HTMLコードを取得する

表示したい場所が決まったら、Googleマップ上の「共有」ボタンをクリックします。共有画面が開いたら、「地図を埋め込む」タブを選択します。

そこに表示されるiframe形式のHTMLコードをコピーします。Googleマップのヘルプでは、ウェブページに地図を埋め込む場合、「地図を埋め込む」から「HTMLをコピー」する流れが案内されています。

コピーするコードは、次のような形式です。

HTML
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

このコードをWordPressに貼り付けることで、ページ内にGoogleマップを表示できます。

2-3. WordPressのカスタムHTMLブロックに貼り付ける

WordPress管理画面にログインし、Googleマップを表示したい投稿または固定ページを開きます。

ブロックエディターを使っている場合は、「＋」ボタンから「カスタムHTML」ブロックを追加します。そこに、先ほどコピーしたGoogleマップのiframeコードを貼り付けます。

通常の段落ブロックに貼り付けるのではなく、必ずHTMLを扱えるブロックに貼り付けるのがポイントです。段落ブロックやビジュアル表示部分に貼ると、コードとして認識されなかったり、表示が崩れたりすることがあります。

WordPress.comの公式サポートでも、外部プラットフォームのコンテンツをサイト内に埋め込めるブロック機能が案内されています。

2-4. プレビューで地図の表示を確認する

コードを貼り付けたら、すぐに公開する前にプレビューで確認しましょう。

確認するポイントは以下です。

・地図が正しく表示されているか
・表示したい住所や店舗名になっているか
・地図のサイズが大きすぎないか
・スマホ表示で横にはみ出していないか
・ページ全体のレイアウトが崩れていないか

特に、WordPressテーマによってはiframeの横幅が固定され、スマホ画面で地図がはみ出すことがあります。その場合は、後述するレスポンシブ対応を行うと改善できます。

2-5. 公開ページで正常に表示されるかチェックする

プレビューで問題がなければ、ページを更新または公開します。

公開後は、管理画面ではなく実際の公開ページを開いて確認してください。ログイン中のプレビューでは表示されていても、公開ページではキャッシュやテーマの影響で見え方が異なることがあります。

また、パソコンだけでなくスマホでも表示確認を行いましょう。Googleマップはアクセスページでスマホ閲覧されることが多いため、スマホで見やすいかどうかが重要です。

3. WordPressエディター別のGoogleマップ埋め込み手順

3-1. ブロックエディターで埋め込む方法

現在のWordPressで一般的に使われているブロックエディターでは、カスタムHTMLブロックを使ってGoogleマップを埋め込みます。

手順は以下の通りです。

WordPress管理画面で投稿または固定ページを開く
Googleマップを表示したい場所にカーソルを合わせる
「＋」ボタンをクリックする
「カスタムHTML」ブロックを選択する
Googleマップのiframeコードを貼り付ける
プレビューで表示を確認する
問題なければ更新・公開する

ブロックエディターでは、地図の上に見出しや説明文を配置したり、地図の下に住所や営業時間を追加したりしやすいです。

たとえば、以下のような構成にすると見やすくなります。

HTML
<h3>アクセス</h3>
<p>〒000-0000 東京都〇〇区〇〇1-2-3</p>
<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

実際には、見出しや住所は通常の見出しブロック・段落ブロックで作成し、iframeだけをカスタムHTMLブロックに貼り付けると管理しやすくなります。

3-2. クラシックエディターで埋め込む方法

クラシックエディターを使っている場合は、編集画面を「ビジュアル」ではなく「テキスト」モードに切り替えます。

GoogleマップのiframeコードはHTMLなので、ビジュアルモードに貼ると正しく反映されないことがあります。必ず「テキスト」タブに切り替えてから、表示したい位置にコードを貼り付けましょう。

手順は以下です。

投稿または固定ページを開く
エディター右上の「テキスト」タブをクリックする
Googleマップを表示したい位置にiframeコードを貼る
プレビューで表示を確認する
問題なければ更新する

クラシックエディターでは、編集途中でビジュアルモードに切り替えるとコードが変わる場合があります。Googleマップの埋め込みコードを扱うときは、なるべくテキストモードで確認するのがおすすめです。

3-3. 固定ページ・投稿ページに埋め込む方法

Googleマップは、固定ページにも投稿ページにも埋め込めます。

会社概要やアクセスページのように、常に表示しておきたい情報は固定ページに設置するのが一般的です。一方、イベント会場案内、期間限定店舗、セミナー会場などの記事では投稿ページに埋め込むとよいでしょう。

固定ページに向いている例は以下です。

・アクセス
・会社概要
・店舗情報
・お問い合わせ
・診療案内
・教室案内

投稿ページに向いている例は以下です。

・イベント告知
・セミナー案内
・展示会情報
・地域紹介記事
・観光スポット紹介

どちらの場合も、基本はGoogleマップから取得したiframeコードをカスタムHTMLブロックに貼り付けるだけです。

3-4. ウィジェットやフッターに埋め込む方法

WordPressでは、テーマによってサイドバーやフッターにGoogleマップを設置できる場合があります。

ブロック対応テーマであれば、外観メニューからウィジェット編集画面を開き、カスタムHTMLブロックを追加してGoogleマップのiframeコードを貼り付けます。

フッターに地図を入れると、サイト内のどのページからでも所在地を確認しやすくなります。ただし、全ページにGoogleマップを読み込むとページ表示速度に影響する可能性があるため、必要性を考えて設置しましょう。

特にスマホではフッターが長くなりすぎることがあります。フッターには小さめの地図を表示し、詳しいアクセス情報は専用ページに誘導する形がおすすめです。

3-5. トップページやアクセスページに設置する方法

トップページにGoogleマップを設置する場合は、ページ下部の「アクセス」セクションに置くのが自然です。

たとえば、以下のような順番にすると見やすくなります。

店舗名・会社名
住所
最寄り駅・駐車場情報
営業時間
Googleマップ
詳しいアクセスページへのリンク

アクセスページに設置する場合は、地図だけでなく、駅からの徒歩ルートや車で来る場合の目印もあわせて書きましょう。地図だけでは伝わりにくい情報をテキストで補足することで、ユーザーに親切なページになります。

4. Googleマップを見やすく調整する方法

4-1. 地図の横幅・高さを変更する方法

Googleマップの埋め込みコードには、通常「width」と「height」が含まれています。

たとえば、以下のような部分です。

HTML
width="600" height="450"

横幅を大きくしたい場合は、widthの数値を変更します。高さを変えたい場合は、heightの数値を変更します。

ただし、スマホ対応を考えるなら、横幅は固定のピクセル指定よりも「100%」に変更するのがおすすめです。

HTML
<iframe src="https://www.google.com/maps/embed?..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

このようにすると、親要素の横幅に合わせて地図が広がるため、パソコンでもスマホでも表示しやすくなります。

4-2. スマホで見切れないレスポンシブ対応の方法

スマホでGoogleマップが横にはみ出す場合は、iframeを囲むHTMLとCSSを使ってレスポンシブ対応にします。

以下のように、地図をdivで囲みます。

HTML
<div class="map-wrap">
  <iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

次に、WordPressの「外観」→「カスタマイズ」→「追加CSS」などに以下を追加します。

CSS
.map-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.map-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これで、画面幅に合わせてGoogleマップが自動で縮小されます。スマホで地図が見切れる場合は、この方法を試してみてください。

4-3. 地図の表示サイズを「小・中・大・カスタム」から選ぶ方法

Googleマップの埋め込み画面では、地図サイズを選べる場合があります。

一般的には「小」「中」「大」「カスタムサイズ」などから選択できます。WordPressの記事内に入れる場合は「中」または「カスタム」がおすすめです。

目安は以下です。

・サイドバーやフッター：小
・通常の記事内：中
・アクセスページのメイン地図：大
・デザインに合わせたい場合：カスタム

ただし、Googleマップで「大」を選ぶと、WordPressの本文幅より大きくなる場合があります。その場合は、iframeコード内のwidthを「100%」に変更すると調整しやすくなります。

4-4. 複数店舗の地図を並べて表示する方法

複数店舗を運営している場合は、店舗ごとにGoogleマップの埋め込みコードを取得し、それぞれWordPressに貼り付ければ表示できます。

ただし、地図を何個も縦に並べるとページが重くなり、ユーザーも見づらくなります。複数店舗を掲載する場合は、以下のような工夫をしましょう。

・店舗ごとに見出しを付ける
・住所、電話番号、営業時間を地図の近くに置く
・地図サイズを統一する
・地域ごとに分類する
・店舗一覧ページから各店舗詳細ページへリンクする

店舗数が多い場合は、1ページにすべてのGoogleマップを埋め込むより、店舗一覧ページを作り、各店舗ページに個別の地図を設置するほうが見やすくなります。

4-5. アクセス情報と地図を見やすく配置するコツ

Googleマップを埋め込むだけでなく、周辺情報もあわせて掲載すると、アクセスページの使いやすさが上がります。

おすすめの配置は以下です。

HTML
<h2>アクセス</h2>
<p>〒000-0000 東京都〇〇区〇〇1-2-3</p>
<p>〇〇駅から徒歩5分。専用駐車場は建物裏にあります。</p>
<iframe src="https://www.google.com/maps/embed?..." width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

地図の前後に住所や補足情報を入れることで、ユーザーは地図を見なくても基本情報を確認できます。

また、地図の下に「Googleマップで見る」「ルートを確認する」といったリンクを設置すると、スマホユーザーにとって便利です。

5. Googleマップが表示されないときの原因と対処法

5-1. 埋め込みコードの貼り付け場所が間違っている

Googleマップが表示されない原因として多いのが、iframeコードの貼り付け場所の間違いです。

ブロックエディターでは、カスタムHTMLブロックに貼り付ける必要があります。段落ブロックや見出しブロックに貼り付けても、HTMLとして正しく動作しないことがあります。

クラシックエディターでは、ビジュアルモードではなくテキストモードに貼り付けましょう。

正しい場所に貼っているか確認するだけで、表示トラブルが解決することはよくあります。

5-2. ビジュアルエディターに貼り付けてコードが消える

クラシックエディターや一部のWordPress環境では、ビジュアルエディターにiframeコードを貼り付けると、保存時にコードが削除されることがあります。

これは、HTMLタグがエディター側で自動整形されたり、セキュリティ上の理由で制限されたりするためです。

対処法は以下です。

・クラシックエディターでは「テキスト」モードに貼る
・ブロックエディターでは「カスタムHTML」ブロックを使う
・管理者権限で編集しているか確認する
・テーマやセキュリティ系プラグインの設定を確認する

特に複数人でWordPressを管理している場合、ユーザー権限によってHTMLタグの利用可否が異なることがあります。

5-3. iframeタグがテーマやプラグインで制限されている

WordPressのテーマやセキュリティ系プラグインによっては、iframeタグの保存や表示が制限されている場合があります。

この場合、貼り付けたコードが保存後に消えたり、公開ページで地図部分が空白になったりします。

対処法としては、以下を確認してください。

・セキュリティ系プラグインのHTML制限設定
・テーマ独自のHTML制限
・ユーザー権限
・WordPress.com利用時のプラン制限
・キャッシュ最適化プラグインの影響

特にWordPress.comと自分でサーバーを契約して使うWordPress.orgでは、利用できる機能や制限が異なる場合があります。iframeが保存できない場合は、利用中の環境を確認しましょう。

5-4. スマホで地図がはみ出す・崩れる

パソコンでは問題なく表示されているのに、スマホでGoogleマップが横にはみ出す場合があります。

主な原因は、iframeコード内のwidthが「600」などの固定幅になっていることです。

まずは以下のように変更してみましょう。

HTML
width="100%"

それでも崩れる場合は、レスポンシブ用のCSSを追加します。スマホ閲覧が多いサイトでは、地図の横幅を固定しないことが大切です。

5-5. 住所や店舗情報がGoogleマップ上で正しく表示されない

WordPress側の設定に問題がなくても、Googleマップ上の情報が間違っていると、埋め込んだ地図にも誤った情報が表示されることがあります。

たとえば、以下のようなケースです。

・店舗名が古い
・住所が移転前のまま
・営業時間が間違っている
・ピンの位置がずれている
・閉業扱いになっている

この場合は、Googleマップ側の店舗情報を修正する必要があります。店舗や会社として情報管理をしている場合は、Googleビジネスプロフィールの内容も確認しましょう。

5-6. キャッシュやブラウザ環境が原因で反映されない

Googleマップのコードを修正したのに表示が変わらない場合は、キャッシュが原因かもしれません。

以下を試してみてください。

・ブラウザの再読み込み
・シークレットウィンドウで確認
・別のブラウザで確認
・スマホとパソコンの両方で確認
・WordPressのキャッシュプラグインを削除
・サーバーキャッシュを削除
・CDNを使っている場合はCDNキャッシュを削除

WordPressでは、ページ高速化のためにキャッシュが使われていることがあります。編集画面では変更済みでも、公開ページでは古い内容が表示される場合があるため注意しましょう。

6. プラグインやAPIが必要になるケース

6-1. iframe埋め込みだけで十分なケース

以下のような目的であれば、iframe埋め込みだけで十分です。

・会社や店舗の場所を表示したい
・アクセスページに地図を載せたい
・ブログ記事で場所を紹介したい
・イベント会場の地図を掲載したい
・複雑なカスタマイズは不要
・APIキーを取得せず簡単に表示したい

WordPress初心者や小規模サイトであれば、まずはプラグインなし・API不要のiframe埋め込みから始めるのがおすすめです。

管理するものが少なく、トラブルも比較的少ないため、最短でGoogleマップを表示できます。

6-2. プラグインを使ったほうがよいケース

一方で、以下のような場合はGoogleマップ系プラグインを検討してもよいでしょう。

・複数店舗を一覧で管理したい
・地図上に複数のピンを表示したい
・ピンの色やアイコンを変えたい
・店舗検索機能を付けたい
・カテゴリ別に地図を表示したい
・管理画面から簡単に地図を編集したい

プラグインを使うと便利な機能を追加できますが、設定項目が増えます。また、プラグインによってはGoogle Maps APIキーが必要になる場合もあります。

導入前に、必要な機能、更新頻度、レビュー、対応WordPressバージョンを確認しましょう。

6-3. Google Maps APIが必要になるケース

Google Maps APIが必要になるのは、通常の地図表示を超えて、独自の機能を実装したい場合です。

たとえば、以下のようなケースです。

・独自デザインの地図を作りたい
・検索条件に応じて地図の表示を変えたい
・現在地から近い店舗を表示したい
・ルート検索をサイト内で完結させたい
・データベースと連携して店舗情報を出したい
・大量の位置情報を地図上に表示したい

Google Maps PlatformのMaps Embed APIはiframeで地図を埋め込むAPIですが、公式ドキュメント上ではAPIキーを使う形で案内されています。

通常の「Googleマップの共有機能からHTMLをコピーする方法」と、開発者向けの「Maps Embed API」は混同しやすいので注意しましょう。

6-4. APIキー取得や課金設定が必要な機能

Google Maps APIを使う場合、多くのケースでGoogle Cloud側の設定が必要になります。

一般的には、以下のような作業が発生します。

・Google Cloudプロジェクトの作成
・Maps Platformの有効化
・APIキーの発行
・APIキーの制限設定
・請求先アカウントの設定
・利用量の確認
・不正利用を防ぐためのドメイン制限

APIキーを使う方法は自由度が高い一方、初心者にはやや難しく感じることがあります。単純にWordPressにGoogleマップを表示したいだけなら、最初からAPIを使う必要はありません。

6-5. 初心者にはプラグインなし埋め込みがおすすめな理由

WordPress初心者には、プラグインなし・API不要のGoogleマップ埋め込みがおすすめです。

理由はシンプルです。

・設定が少ない
・追加プラグインの管理が不要
・APIキーの取得が不要
・課金設定を気にしなくてよい
・トラブル時に原因を特定しやすい
・地図の差し替えも簡単

WordPressでは、必要以上にプラグインを増やすと、表示速度や管理の手間に影響することがあります。まずはiframe埋め込みで対応し、機能が足りなくなった段階でプラグインやAPIを検討するとよいでしょう。

7. WordPressにGoogleマップを埋め込む際の注意点

7-1. Googleマップの利用規約を確認する

Googleマップをサイトに埋め込む際は、Googleの利用規約やGoogle Maps Platformの規約を確認しておくことが大切です。Google Maps PlatformのFAQでは、Google Maps Platform製品の利用は利用規約に従う必要があると案内されています。

通常の店舗地図表示であれば難しく考えすぎる必要はありませんが、地図の画像を加工したり、Googleの表示を隠したり、地図データを別用途で利用したりするのは避けましょう。

埋め込みコードで表示されるGoogleロゴや地図上の情報は、そのまま表示するのが基本です。

7-2. 個人情報や自宅住所の掲載に注意する

個人ブログや個人事業主のサイトでGoogleマップを埋め込む場合、自宅住所を公開してよいか慎重に判断しましょう。

特に、自宅兼事務所、個人サロン、個人教室などでは、住所を公開することでプライバシーや安全面のリスクが生じることがあります。

住所を公開したくない場合は、以下のような対応を検討しましょう。

・市区町村までの表示にする
・予約者にのみ詳細住所を案内する
・最寄り駅だけ掲載する
・バーチャルオフィスや店舗所在地を使う
・問い合わせ後に個別案内する

Googleマップは便利ですが、一度公開すると多くの人が閲覧できるため、掲載する情報は慎重に選びましょう。

7-3. ページ表示速度への影響を抑える

Googleマップの埋め込みは便利ですが、iframeで外部コンテンツを読み込むため、ページ表示速度に影響することがあります。

特に、1ページに複数のGoogleマップを埋め込む場合や、トップページに大きな地図を表示する場合は注意が必要です。

対策としては、以下があります。

・必要なページだけに地図を設置する
・トップページでは小さめに表示する
・詳細な地図はアクセスページにまとめる
・複数店舗は各店舗ページに分ける
・iframeにloading="lazy"が入っているか確認する

loading="lazy"は、地図の読み込みを遅らせる指定です。Googleマップの埋め込みコードに含まれている場合は、そのまま残しておきましょう。

7-4. アクセス情報・営業時間・電話番号もあわせて掲載する

Googleマップだけを掲載しても、ユーザーに必要な情報がすべて伝わるとは限りません。

地図とあわせて、以下の情報も掲載しましょう。

・住所
・電話番号
・営業時間
・定休日
・最寄り駅
・駐車場の有無
・建物名や階数
・入口の場所
・予約の有無

特にビルの中にある店舗や、入口がわかりにくい施設では、テキストで補足することが重要です。

「〇〇駅A1出口から徒歩3分」「1階にコンビニがあるビルの3階です」といった具体的な案内があると、ユーザーは迷いにくくなります。

7-5. Googleビジネスプロフィールの情報と統一する

店舗や会社を運営している場合、WordPressサイトの情報とGoogleビジネスプロフィールの情報は統一しておきましょう。

サイト上の住所や営業時間と、Googleマップ上の情報が異なると、ユーザーが混乱します。

確認すべき項目は以下です。

・店舗名・会社名
・住所
・電話番号
・営業時間
・定休日
・WebサイトURL
・写真
・サービス内容

特に移転、営業時間変更、電話番号変更があった場合は、WordPressサイトだけでなくGoogleビジネスプロフィール側も更新しましょう。

8. WordPressのGoogleマップ埋め込みに関するよくある質問

8-1. Googleマップの埋め込みは無料でできますか？

一般的なGoogleマップの共有機能から埋め込み用HTMLをコピーし、WordPressに貼り付ける方法であれば、APIキーの取得やGoogle Cloudの課金設定なしで利用できます。

ただし、Google Maps APIを使って高度な機能を実装する場合は、Google Maps Platformの料金体系や利用条件を確認する必要があります。

単純な店舗地図や会社所在地の表示であれば、まずはプラグインなし・API不要のiframe埋め込みを使うとよいでしょう。

8-2. APIキーなしでもGoogleマップは表示できますか？

はい。Googleマップの「共有」から「地図を埋め込む」を選び、HTMLコードをコピーしてWordPressに貼り付ければ、APIキーなしで表示できます。

ただし、開発者向けのGoogle Maps Embed APIを直接利用する場合はAPIキーが必要です。Google Maps Embed APIの公式ドキュメントでも、APIキーを使う形で説明されています。

「共有機能の埋め込み」と「Google Maps APIの利用」は別物として考えるとわかりやすいです。

8-3. プラグインなしで複数の地図を表示できますか？

はい。Googleマップで店舗ごとに埋め込みコードを取得し、それぞれWordPressのカスタムHTMLブロックに貼り付ければ、プラグインなしで複数の地図を表示できます。

ただし、地図をたくさん設置するとページが長くなり、表示速度にも影響する可能性があります。

複数店舗を掲載する場合は、店舗ごとにページを分ける、地図サイズを小さくする、一覧ページから個別ページにリンクするなどの工夫をしましょう。

8-4. スマホ対応にするにはCSSが必要ですか？

Googleマップのiframeコード内でwidthを「100%」に変更するだけでも、ある程度スマホ対応できます。

ただし、テーマによってはそれだけでは地図がはみ出す場合があります。その場合は、iframeをdivで囲み、レスポンシブ用CSSを追加すると安定します。

スマホで見切れないようにするには、以下のような指定が有効です。

CSS
.map-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.map-wrap iframe {
  position: absolute;
  width: 100%;
  height: 100%;
}

アクセスページはスマホで見られることが多いため、公開前に必ずスマホ表示を確認しましょう。

8-5. ルート案内付きの地図は埋め込めますか？

Googleマップでルートを検索した状態から共有機能を使うことで、ルート案内に関する共有や埋め込みができる場合があります。Googleヘルプでも、パソコンでルートを開き、共有アイコンから「地図を埋め込む」「HTMLをコピー」を選ぶ手順が案内されています。

ただし、ユーザーの現在地からのルートを自動で表示したい場合や、サイト内で複雑なルート検索を実装したい場合は、APIや専用機能が必要になることがあります。

通常のアクセス案内であれば、地図の下に「Googleマップでルートを見る」というリンクを設置するだけでも十分便利です。

8-6. Googleマップが急に表示されなくなった場合はどうすればよいですか？

まず、WordPress側とGoogleマップ側の両方を確認しましょう。

確認ポイントは以下です。

・iframeコードが消えていないか
・カスタムHTMLブロックに貼られているか
・テーマやプラグインを更新した直後ではないか
・セキュリティ系プラグインがiframeを制限していないか
・キャッシュが残っていないか
・別ブラウザやスマホでも表示されないか
・Googleマップ上で該当住所や店舗が表示されるか

最近テーマやプラグインを更新した場合は、その影響でiframeが制限された可能性があります。キャッシュ削除、プラグイン停止、テーマ変更による確認を順番に行うと原因を特定しやすくなります。

まとめ

WordPressにGoogleマップを埋め込む方法は、難しくありません。住所や店舗所在地を表示するだけなら、Googleマップの共有機能から埋め込み用HTMLコードをコピーし、WordPressのカスタムHTMLブロックに貼り付けるだけで対応できます。

プラグインなし・API不要で設置できるため、初心者でもすぐに実践しやすい方法です。

基本の流れは以下です。

Googleマップで住所や店舗名を検索する
「共有」から「地図を埋め込む」を選ぶ
HTMLコードをコピーする
WordPressのカスタムHTMLブロックに貼り付ける
プレビューとスマホ表示を確認する
問題なければ公開する

地図が表示されない場合は、貼り付け場所、iframeタグの制限、ビジュアルエディターへの貼り付け、スマホ表示、キャッシュなどを確認しましょう。

また、アクセスページではGoogleマップだけでなく、住所、電話番号、営業時間、最寄り駅、駐車場情報もあわせて掲載すると、ユーザーにとってわかりやすいページになります。

まずはシンプルなiframe埋め込みでGoogleマップを表示し、複数店舗管理や高度なカスタマイズが必要になった段階で、プラグインやGoogle Maps APIの利用を検討するのがおすすめです。