WordPressにGoogleマップを埋め込む方法！スマホ対応のしかたも

店舗や会社のWebサイトを作っているとき、「Googleマップを埋め込みたい」と思う方も多いのではないでしょうか。実は、通常の店舗サイトや会社案内ページであれば、Googleマップの埋め込みコードをWordPressに貼り付けるだけで簡単に表示できます。専用のプラグインやAPIキーは必須ではありません。

この記事では、WordPressにGoogleマップを埋め込む方法をわかりやすく解説します。ブロックエディターでの貼り付け方やスマホ対応の方法、表示されない原因、プラグインが必要なケースまで紹介します。

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

WordPressにGoogleマップを埋め込んで表示させる方法は、大きく以下の3つに分けられます。

1. Googleマップの埋め込みコードを貼り付ける
2. プラグインを使う
3. Google Maps APIを使う

それぞれ特徴が異なるため、目的に合わせて選びましょう。

Googleマップの埋め込みコードを貼り付ける方法

WordPressにGoogleマップを埋め込む方法の1つ目は、Googleマップから取得した埋め込みコードをWordPressに貼り付ける方法です。

Googleマップで店舗名や住所を検索し、「共有」から「地図を埋め込む」を選択すると、HTMLコードを取得できます。そのコードをWordPressの「カスタムHTML」ブロックに貼り付ければ、ページ上に地図を表示できます。この方法であれば、専門知識は不要です。APIキーの取得や複雑な設定も必要ありません。

プラグインを使用する方法

Googleマップ用のWordPressプラグインを使う方法もあります。プラグインを使うと、管理画面から地図の設定がしやすくなります。例えば、複数店舗のマップを管理したい場合や、ピンのデザインを変更したい場合、地図の表示スタイルを細かく調整したい場合などに便利です。

ただし、シンプルに1つの地図を表示するだけなら、プラグインを入れなくても問題ありません。プラグインを増やすとサイトが重くなったり、管理が複雑になったりする可能性もあります。

Google Maps APIを使用する方法

より高度な地図を作りたい場合は、Google Maps APIを使う、という方法もあります。例えば、以下のような機能を実装したい場合に使用されます。

• オリジナルデザインの地図を作りたい
• 複数のマーカーを自由に表示したい
• 検索機能付きの店舗マップを作りたい
• 現在地から近い店舗を表示したい
• 地図上で独自の動きを加えたい

ただし、APIを使う場合はGoogle Cloudの設定やAPIキーの管理が必要になることがあります。初心者にはやや難易度が高いため、通常のWordPressサイトでは、まず埋め込みコードを使う方法がおすすめです。

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

ここからは、Googleマップの埋め込みコードを取得する方法を解説します。

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

まずは、Googleマップにアクセスします。検索窓に、埋め込みたい場所の店舗名や住所を入力してください。

例：

• 株式会社〇〇
• 〇〇カフェ 新宿店
• 東京都〇〇区〇〇1-2-3
• 〇〇駅

Googleビジネスプロフィールに登録されている店舗であれば、店舗名で検索すると表示されます。

2.「共有」から「地図を埋め込む」を選択する

表示したい場所が出てきたら、画面内の「共有」をクリックします。共有画面が開いたら、次に「地図を埋め込む」タブを選択します。すると、WordPressに貼り付けるためのHTMLコードが表示されます。

3.地図サイズを選んでHTMLコードをコピーする

「地図を埋め込む」画面では、地図サイズを選択できます。サイズを選択したら、「HTMLをコピー」をクリックします。このとき取得できるコードが、WordPressに貼り付ける埋め込みコードです。

4.住所検索と店舗名検索、どちらで埋め込むべきか

店舗や会社のGoogleビジネスプロフィールがある場合は、店舗名・会社名で検索して埋め込むのがおすすめです。理由は、ユーザーが地図上で店舗名を認識しやすくなるためです。

一方、Googleマップ上に店舗情報がない場合や、特定の建物・会場を示したい場合は、住所検索でも問題ありません。迷った場合は、実際にGoogleマップで表示された内容を確認し、ユーザーにとってわかりやすい方を選びましょう。

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

Googleマップの埋め込みコードをコピーしたら、次はWordPressに貼り付けます。ここでは、現在よく使われているブロックエディターでの手順を解説します。

ブロックエディターの場合

WordPressの管理画面にログインし、Googleマップを表示したい投稿または固定ページを開きます。アクセスページに表示したい場合は、固定ページで作成するケースが多いです。Googleマップを埋め込む手順は、以下の通りです。

1. WordPress管理画面にログインする
2. 「投稿」または「固定ページ」を開く
3. Googleマップを表示したいページを編集する
4. 地図を表示したい位置にブロックを追加する
5. 「カスタムHTML」ブロックを選択する
6. Googleマップの埋め込みコードを貼り付ける
7. プレビューで表示を確認する
8. 問題なければ更新・公開する

「カスタムHTML」ブロックにコードを貼り付ける

ブロックエディターでは、通常の段落ブロックではなく「カスタムHTML」ブロックを使います。「＋」ボタンをクリックし、検索窓に「HTML」と入力すると「カスタムHTML」ブロックが表示されます。そこに、Googleマップからコピーしたiframeコードを貼り付けます。

<iframe

  src=”https://www.google.com/maps/embed?pb=…”

  width=”600″

  height=”450″

  style=”border:0;”

  allowfullscreen=””

  loading=”lazy”

  referrerpolicy=”no-referrer-when-downgrade”>

</iframe>

貼り付けた後、必要に応じてwidthを変更すると、スマホでも見やすくなります。

プレビューで地図が表示されるか確認する

コードを貼り付けたら、編集画面の「プレビュー」をクリックして表示を確認しましょう。ブロックエディター上では、地図が正しく表示されない場合があります。その場合でも、実際のプレビュー画面や公開ページでは表示されることがあります。必ず公開前に、実際のページ表示で確認しましょう。

公開ページで表示をチェックする

ページを公開・更新したら、以下の点を確認してください。

• Googleマップが正しく表示されているか
• 地図の位置がずれていないか
• スマホで見たときにはみ出していないか
• 地図の高さが低すぎないか
• 住所や店舗情報と地図の位置が一致しているか

パソコンだけではなく、スマホでの表示も確認することが大切です。

クラシックエディターの場合

クラシックエディターを使っている場合でも、Googleマップの埋め込みは可能です。ただし、貼り付ける場所には注意が必要です。

「テキスト」タブに切り替えてコードを貼り付ける

クラシックエディターでは、「ビジュアル」タブではなく「テキスト」タブに切り替えてからコードを貼り付けます。手順は以下の通りです。

1. 投稿または固定ページの編集画面を開く
2. エディター右上の「テキスト」タブをクリックする
3. 地図を表示したい位置にiframeコードを貼り付ける
4. プレビューで確認する
5. 問題なければ更新する

「ビジュアル」タブに貼ると表示が崩れる場合がある

Googleマップの埋め込みコードを「ビジュアル」タブに貼り付けると、HTMLコードがそのまま文字として表示されたり、意図しない形に変換されたりすることがあります。そのため、クラシックエディターでは必ず「テキスト」タブに貼り付けましょう。

Googleマップをスマホ対応にする方法

GoogleマップをWordPressに埋め込む際は、スマホ対応（レスポンシブ対応）にすることも重要です。パソコン上では問題なく表示されていても、スマホでは地図が横にはみ出すことがあります。

幅（width）を100%にする

最も簡単な方法は、iframeコードのwidthを100%に変更することです。元のコードが以下のようになっている場合、

width=”600″

次のように変更します。

width=”100%”

高さ（height）を300～400pxにする

地図の高さは、PCでは400〜500px程度、スマホでは300〜400px程度が見やすいとされています。低すぎると地図が見づらくなり、高すぎるとページ内で場所を取りすぎます。迷った場合は、以下のような設定にしましょう。

ただし、実際にどのように表示されるのか確認してから公開しましょう。

width=”100%”

height=”400″

CSSでレスポンシブ対応する方法

よりきれいにレスポンシブ対応したい場合は、iframeを囲む要素を作り、CSSで調整します。HTMLは以下のようにします。

<div class=”google-map”>

  <iframe

    src=”https://www.google.com/maps/embed?pb=…”

    style=”border:0;”

    allowfullscreen=””

    loading=”lazy”

    referrerpolicy=”no-referrer-when-downgrade”

    title=”Googleマップ”>

  </iframe>

</div>

CSSは以下のように設定します。

.google-map {

  width: 100%;

  aspect-ratio: 16 / 9;

}

 

.google-map iframe {

  width: 100%;

  height: 100%;

  border: 0;

}

aspect-ratioを使うことで、画面幅に応じて自然な比率で地図を表示できます。

GoogleマップがWordPressで表示されない原因と対処法

Googleマップの埋め込みコードを貼ったのに表示されない場合、原因はいくつか考えられます。1つずつ順番に確認していきましょう。

HTMLブロックではなく通常ブロックに貼っている

ブロックエディターを使用している場合、通常の段落ブロックにiframeコードを貼ると、正しく表示されない場合があります。Googleマップの埋め込みコードは、必ず「カスタムHTML」ブロックに貼り付けましょう。

iframeタグがWordPress側で削除されている

WordPressの権限やセキュリティ設定によっては、iframeタグが削除されることがあります。特に、以下の環境では注意が必要です。

• 管理者以外のユーザーで編集している
• マルチサイトで運用している
• セキュリティ系プラグインを導入している
• WordPress.comを利用している

コードが消える場合は、管理者権限で操作するか、セキュリティ設定を確認しましょう。

テーマやプラグインの影響

テーマやプラグインのCSS・JavaScriptが影響して、Googleマップが表示されないこともあります。確認方法としては、以下が有効です。

• 一時的にキャッシュ系プラグインを停止する
• セキュリティ系プラグインの設定を確認する
• 別テーマに切り替えて表示を確認する
• ブラウザの開発者ツールでエラーを確認する

特定のプラグインを停止したときに表示される場合は、そのプラグインの設定が原因の可能性があります。

キャッシュの影響

コードを修正したのに表示が変わらない場合は、キャッシュが残っている可能性があります。以下のキャッシュを削除して確認しましょう。

• WordPressのキャッシュプラグイン
• サーバーキャッシュ
• CDNキャッシュ
• ブラウザキャッシュ

特に、表示速度改善系のプラグインを使っている場合は、キャッシュ削除後に再確認してください。

ブラウザや広告ブロッカーの影響

ブラウザの拡張機能や広告ブロッカーが原因で、Googleマップが表示されなくなっている場合もあります。別のブラウザやシークレットウィンドウで確認すると、原因を切り分けやすくなります。

また、Cookie同意ツールやプライバシー系プラグインを使っている場合、外部コンテンツとしてGoogleマップの読み込みを制限していることもあります。

プラグインなしで埋め込むメリット

プラグインなしでGoogleマップを埋め込むメリットは以下の通りです。

• 設定が簡単
• APIキーが不要
• 余計なプラグインを増やさずに済む
• サイト管理がシンプル
• 表示速度への影響を抑えやすい

1店舗のアクセスページに地図を表示するだけなら、プラグインなしで十分なことが多いです。

プラグインを使うメリット

プラグインを使うメリットは、管理画面から地図を設定しやすいことです。また、以下のような機能を使える場合があります。

• 複数マーカーの設置
• 地図デザインの変更
• ピンアイコンの変更
• 店舗一覧との連携
• ショートコードでの表示
• 地図サイズの簡単調整

HTMLコードを直接編集したくない方や、複数の地図を管理したい方には便利です。

Googleマップ用プラグインの選び方

Googleマップ用プラグインを選ぶときは、以下のポイントを確認しましょう。

• 最終更新日が新しいか
• WordPressの最新バージョンに対応しているか
• レビューや評価が安定しているか
• 日本語環境でも使いやすいか
• 必要な機能が無料版で使えるか
• APIキーが必要かどうか
• 表示速度に大きな影響がないか

不要な機能が多すぎるプラグインは、サイトを重くする原因になることもあります。必要な機能に絞って選ぶことが大切です。

Googleマップを埋め込む際の注意点

Googleマップは便利ですが、埋め込む際にはいくつか注意すべきポイントがあります。

ページ表示速度が遅くなる場合がある

Googleマップは外部サービスを読み込むため、ページ表示速度に影響する場合があります。特に、1ページ内に複数の地図を埋め込むと、読み込みが重くなることがあります。アクセスページに1つ表示する程度なら大きな問題になりにくいですが、複数の地図を表示する場合は注意しましょう。

必要に応じて遅延読み込みを検討する

Googleマップのiframeコードには、以下のような記述が含まれていることがあります。

loading=”lazy”

これは、ユーザーが地図の近くまでスクロールしたときに読み込むための設定です。ページ表示速度を改善したい場合は、loading=”lazy”が入っているか確認しましょう。

Googleマップの利用規約を確認する

Googleマップをサイトに埋め込む場合は、Googleの利用規約やガイドラインに沿って使用する必要があります。通常のWebサイトで、Googleマップの共有機能から取得した埋め込みコードを使う場合は多くのケースで問題ありませんが、以下のような使い方をする場合は注意が必要です。

• 地図画像をスクリーンショットで無断利用する
• Googleのロゴや著作権表示を隠す
• 地図を加工して再配布する
• 有料サービス内で特殊な使い方をする

不安な場合は、最新のGoogle公式情報を確認しましょう。

住所・営業時間・店舗情報は正確に掲載する

Googleマップの位置情報だけではなく、ページ内の住所や営業時間も正確に掲載しましょう。Googleマップ上の情報とWebサイト上の情報が異なると、ユーザーが混乱します。特に、以下の情報は定期的に確認しましょう。

• 住所
• 電話番号
• 営業時間
• 定休日
• 駐車場情報
• 店舗名
• Googleビジネスプロフィールの情報

移転や営業時間変更があった場合は、WebサイトとGoogleビジネスプロフィールの両方を更新することが重要です。

SEO・MEOを意識したGoogleマップの埋め込み方

Googleマップを埋め込むだけで検索順位が大きく上がるわけではありません。しかし、ユーザーにとってわかりやすいアクセスページを作ることは、SEOやMEOの観点でも重要です。

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

店舗サイトの場合、Googleビジネスプロフィールの情報とWordPressサイト上の情報を統一させましょう。特に、以下の情報は表記ゆれを避けることが大切です。

• 店舗名
• 住所
• 電話番号
• 営業時間
• 定休日
• URL

WebサイトとGoogleビジネスプロフィールの情報が一致していると、ユーザーにも検索エンジンにもわかりやすくなります。

店舗名・住所・電話番号をページ内にも記載する

Googleマップを埋め込むだけではなく、店舗名や住所、電話番号をテキストでも記載しましょう。これらはNAP情報とも呼ばれており、店舗ビジネスにおいて特に重要な情報です。NAPとは、以下の頭文字です。

• Name：店舗名・会社名
• Address：住所
• Phone number：電話番号

アクセス方法や最寄り駅の情報も追加する

アクセスページでは、地図だけでなく具体的な道順も掲載しましょう。例えば、以下のような情報です。

• 〇〇駅東口から徒歩5分
• 〇〇交差点を右折
• 1階にコンビニがあるビルの3階
• 専用駐車場はありません
• 近隣にコインパーキングがあります

初めて訪問するユーザーにとって、地図だけでは不十分な場合があります。文章で補足することで、来店前の不安を減らせます。

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

最後に、WordPressでGoogleマップを埋め込む際によくある質問を紹介します。

Googleマップの埋め込みは無料ですか？

Googleマップの「共有」から取得する通常の埋め込みコードであれば、基本的に無料で利用できます。ただし、Google Maps APIを使って高度なカスタマイズを行う場合は、Google Cloudの設定や料金確認が必要になる場合があります。

APIキーは必要ですか？

通常のiframe埋め込みであれば、APIキーは不要です。Googleマップの「共有」→「地図を埋め込む」から取得したコードをWordPressに貼り付けるだけで表示できます。

一方、独自の地図機能を実装したい場合や、Google Maps APIを利用する場合は、APIキーが必要になることがあります。

商用サイトにGoogleマップを埋め込んでも問題ありませんか？

一般的な店舗サイトや会社サイトに、Googleマップの共有機能で取得した埋め込みコードを掲載することは多くのケースで利用されています。

ただし、Googleのロゴや著作権表示を隠したり、地図を無断加工したりするような使い方は避けましょう。商用サイトで特殊な使い方をする場合は、Googleの最新の利用規約を確認してください。

複数のGoogleマップを1ページに埋め込めますか？

複数のGoogleマップを1ページに埋め込むことは可能です。

ただし、地図を多く埋め込みすぎるとページの読み込みが重くなる可能性があります。複数店舗を紹介する場合は、店舗ごとに地図を埋め込むだけでなく、Googleマイマップやプラグインの利用も検討しましょう。

埋め込みコードを貼っても表示されないのはなぜですか？

埋め込みコードを貼っても、地図がうまく表示されない場合、以下のような原因が考えられます。

• 通常の段落ブロックに貼っている
• カスタムHTMLブロックを使っていない
• iframeタグが削除されている
• セキュリティ系プラグインが影響している
• キャッシュが残っている
• ブラウザ拡張機能がブロックしている
• テーマやプラグインのCSSが影響している

まずは「カスタムHTML」ブロックに貼っているか確認し、次にキャッシュやプラグインの影響をチェックしましょう。

まとめ：WordPressにGoogleマップを埋め込むならHTMLコードの貼り付けが簡単

WordPressにGoogleマップを埋め込む方法はいくつかありますが、初心者におすすめなのは、Googleマップの埋め込みコードを貼り付ける方法です。

Googleマップで表示したい場所を検索し、「共有」から「地図を埋め込む」を選択してHTMLコードをコピーします。そのコードをWordPressの「カスタムHTML」ブロックに貼り付ければ、プラグインやAPIキーを使わなくても簡単にGoogleマップを表示できます。店舗サイトや会社サイトのアクセスページであれば、基本的にはこの方法で十分です。

ただし、スマホで地図がはみ出さないように、iframeコードのwidthは100%に変更しておくと安心です。また、Googleマップを埋め込むだけでなく、住所・電話番号・営業時間・最寄り駅からの道順などもあわせて掲載すると、ユーザーにとってわかりやすいアクセスページになります。