WordPressでのGoogleマップ埋め込み基本ガイド
Googleマップ埋め込みとは？
Googleマップ埋め込みとは、Googleが提供する地図情報を自分のWebサイトに表示させる機能のことです。店舗やオフィスの所在地を地図で見せることで、訪問者に分かりやすく案内できます。WordPressでは簡単にGoogleマップを埋め込むことができ、コードの知識がなくても設定可能です。
WordPressにおける埋め込みのメリット
- アクセス性の向上：来店や訪問のハードルを下げます。
- 信頼性の向上：実在する場所を示すことで安心感を与えます。
- SEO効果：地域名や地図情報がGoogleのローカル検索に有利です。
- ユーザー体験の向上：スマホでもワンタップでナビを起動できます。
Googleマップを埋め込む際の注意点
- 無断転載を避け、Googleの利用規約を確認する。
- iframeコードをそのまま貼る場合、レスポンシブ対応に注意。
- ページ速度を意識し、必要以上に多く埋め込まない。
- 埋め込み先がSSL対応であることを確認（https://が必須）。
埋め込みができない理由とその解決法
- 原因①：テーマの制限 → テキストモードで貼り付ける。
- 原因②：ブロックエディター非対応 → HTMLブロックを使用。
- 原因③：Google APIの設定不足 → APIキーを取得して設定する。
レスポンシブデザインを考慮した埋め込み方法
スマホ・タブレット対応にするには、以下のCSSを追加します。
.map-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.map-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Googleマップ埋め込みの具体的手順
Google Maps APIキーの取得方法
- Google Cloud Platformにアクセス。
- プロジェクトを作成し、「APIとサービス」→「認証情報」を選択。
- 「APIキーを作成」し、発行されたキーをコピー。
- 制限設定（ドメイン指定）を行い、安全性を確保。
HTMLコードでの埋め込み手順
- Googleマップで住所を検索。
- 「共有」→「地図を埋め込む」を選択。
- 表示サイズを選び、iframeコードをコピー。
- WordPressの記事や固定ページに貼り付け。
プラグインを使った簡単な埋め込み方法
おすすめは以下の2つです。
| プラグイン名 | 特徴 |
|---|---|
| WP Google Maps | ドラッグ操作で自由にマーカーを設定可能。 |
| MapPress Maps for WordPress | 投稿ごとに異なる地図を簡単設置。 |
これらを使えばコード不要で地図を追加できます。
エディターでの埋め込み手順
- ブロックエディターの場合：「カスタムHTML」ブロックにiframeを貼り付け。
- クラシックエディターの場合：「テキスト」タブで直接貼り付け。
複数のマーカーを用いた地図のカスタマイズ
複数マーカーの設定方法
プラグインを使えば、複数拠点を1枚の地図に表示できます。
例：WP Google Maps → 「Add Marker」で住所を複数追加。
マーカーにテキストや画像を追加する方法
店舗ロゴや店舗名をポップアップ表示させることで視覚的に分かりやすくなります。
HTMLタグを利用して、説明文やリンクも追加可能です。
地図中心のずらし方
地図の中心点はデフォルトで最初のマーカーに設定されます。
より自然な表示にしたい場合、マーカーの中間地点を計算し、中央を調整します。
固定ページでのGoogleマップ埋め込み活用
固定ページに Googleマップを追加する理由
会社概要やアクセスページなど、固定情報として掲載するのが最適です。
特に飲食店・美容室・クリニックなどは必須要素です。
企業情報を掲載するための工夫
- 店舗名・住所・電話番号（NAP情報）を地図下に掲載。
- 営業時間や定休日を明記。
- 「Googleマップで見る」ボタンを設置し、操作性を向上。
埋め込みマップのサイズとデザイン調整
マップサイズの調整方法
iframeのwidthとheightを直接変更できます。
例：
<iframe width="100%" height="400" src="..."></iframe>
埋め込みコードのデザインカスタマイズ
CSSでボーダーやシャドウを付けると印象が変わります。
iframe {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
Googleマップのストリートビュー機能活用法
ストリートビューの埋め込み方
- Googleマップ上でストリートビューを表示。
- 右上のメニューから「画像を共有」→「埋め込みコードをコピー」。
- WordPressに貼り付けるだけで完了。
ユーザー体験を向上させるための活用法
店内の雰囲気をストリートビューで見せると信頼性が高まります。
「バーチャル内覧」効果により、来店前の不安を解消できます。
WordPressテーマに合わせたマップデザイン
テーマ別のデザイン調整ポイント
- SWELL：ブロック装飾を活用し、地図をカード風に。
- Cocoon：余白が多いのでiframeにクラスを追加して中央寄せ。
- Lightning：ウィジェットエリアに埋め込みも可能。
カスタムCSSでのスタイル変更
テーマ全体のトーンに合わせて地図の縁やサイズを調整すると統一感が出ます。
よくある質問とトラブルシューティング
エラーが出た場合の対処法
- “For development purposes only”表示：APIキー設定不足。
- 地図が真っ白：SSL未対応またはiframeブロック。
- 拡大縮小が効かない：JavaScript競合の可能性あり。
他のユーザーのケーススタディ
飲食店では複数店舗地図を活用し、ユーザーが最寄り店舗を探しやすくなりました。
美容室ではストリートビューを掲載し、初来店率が上昇しました。
Googleマップ埋め込みの将来展望
今後のGoogle Maps機能の進化
AIによる経路案内や混雑情報のリアルタイム反映が進化しています。
API連携によって、よりパーソナライズされた地図表示が可能になる見込みです。
WPユーザーへの新機能のロールアウト予定
ブロックエディターでのマップブロック標準搭載や、API不要の簡易表示が今後期待されます。
ノーコードで地図管理ができる時代が到来しています。
Nomu Designでは、WordPressサイトへのGoogleマップ埋め込みからデザイン統一までトータルサポートを行っています。
あなたの店舗やオフィスを「地図で伝える」ことで、アクセスアップにつなげましょう。
