WordPressとGoogleマップを連携するには？
埋め込み・APIキー・複数店舗表示と料金対策まで
店舗の場所を分かりやすく載せたい、でもAPIキーや課金、ページ表示の重さが不安…というご相談をよくいただきます。最小の工数で始めて、必要に応じて拡張できる現実的なやり方を整理しました。
「地図を入れるだけ」のはずが、選び方で成果もコストも変わります
サロンやカフェ、教室などの小規模ビジネスでは、来店までの導線として地図は必須です。ただ、WordPressに地図を載せる方法は1つではありません。Googleマップの「単純な埋め込み（iframe）」で十分な場合もあれば、複数店舗のピン管理やデザイン調整、クリック計測まで必要になるケースもあります。
また、Google Maps PlatformのAPIを使う実装では、APIキーと請求先設定が要ります。無料枠があっても使い方によっては課金が発生することがあるため、速度とコストのバランス設計が重要です。本稿では「まずは軽く・無料に近く」→「必要に応じて拡張」という順で考える手順をまとめます.
Googleマップ連携で実現できること（小規模店舗向けチェックリスト）
色味やピンのアイコン変更、駐車場やランドマークの強調などのデザイン調整も可能です。ただし凝りすぎると読み込みが重くなる傾向があるため、「来店に必要な最小情報」にまず絞るのがおすすめです。
代表的な実装方法とプラグインの選び方
- 最小コストで手早く：投稿や固定ページにGoogleマップの「埋め込み（iframe）」を貼る。APIキー不要で、Gutenbergの埋め込み/カスタムHTMLブロックでも対応可能。
- 複数店舗や一覧管理：WP Google Maps、MapPress Maps for WordPress、有料のAdvanced Google Maps Plugin for WordPressなどのプラグイン。ピンの一括管理やカテゴリ分け、スタイル調整に強み。APIキーが必要な構成が多い点に留意。
- 拡張性とデータ管理重視：Advanced Custom Fields（ACF）＋カスタム投稿＋Maps JavaScript API。店舗データベースと地図表示を連動しやすく、成長後も拡張しやすいが実装コストは高め。
- コストとプライバシー配慮：Leaflet＋OpenStreetMap対応のプラグインを選ぶ方法も。Google依存を避けられますが、デザインや機能の日本語情報が少ない場合があります。
海外プラグインは日本語情報やサポートが十分でない場合があります。検証環境で動作・日本語表記・更新頻度を確認し、必要最小の構成から導入するのが安全です。
導入手順（設計 → API準備 → 実装・計測）
要件設計：店舗数／ピン情報（住所・営業時間・電話）／スマホでの導線（電話・経路・予約）を整理。まずはiframeで軽量に始め、必要ならプラグインやAPIに拡張する方針を決めます。住所はテキストでも併記し、地図が見られない環境でも到達可能に。
APIキー準備（APIを使う場合）：Google Cloudでプロジェクト作成→Maps関連APIを有効化→請求先を設定→HTTPリファラー制限をかける→利用上限や予算アラートを設定。まずは低リスクで様子見できる体制に。
実装・計測：iframeを貼るか、プラグインにAPIキーと住所を設定→遅延読み込みや静的サムネイルで速度最適化→「経路ボタン」「電話」「予約」などのクリックをイベント計測して導線を検証します。
クリックや経路ボタンの計測には WordPressとGoogleタグマネージャーを連携する方法 が役立ちます。来店経路の最適化はMEO施策とも相性が良く、あわせて Googleビジネスプロフィールだけで集客は足りる？ もご参照ください。
よくある悩みと判断のヒント
複数店舗を1枚の地図に
ページが重くならないか
無料優先ならまずはiframe埋め込み＋住所のテキスト併記。複数店舗管理が必要になったらプラグイン＋APIに拡張し、遅延読み込みとクリック計測で「重さ」と「成果」を両立させます。既存サイトへの後付けも可能ですが、予約・問合せへの導線設計と計測設計をセットで行うと後悔が少ないです。
地図・予約・決済まで一気通貫。小規模ビジネスの導線を設計します
Googleマップの軽量表示から複数店舗管理、計測・MEO連携まで、要件に合わせて最小コストで実装します。チラシ感覚の簡易プラン（6ヶ月5,000円〜）や月額制の更新しやすいサイトもご用意しています。