「自分のお店やオフィスの地図を、WordPressサイトに表示したい」そんなお悩みはありませんか？この記事では、GoogleマップをWordPressに簡単に埋め込む方法を、図解を交えて丁寧に解説します。コーディング不要で、初心者の方でもすぐに設置できるようになります。
目次
- なぜGoogleマップを表示するべきか？
- 【方法1】GoogleマップをHTML埋め込みで表示する
- 【方法2】プラグインを使って表示する
- Google Maps APIの利用は必要？
- マップのデザインをカスタマイズする方法
- 表示されない場合の対処法
- まとめ
なぜGoogleマップを表示するべきか？
ユーザーにとって、店舗やオフィスの位置をすぐに確認できることは大きな利便性です。SEOの観点でも、「地域名＋サービス名」などのローカル検索対策に有効です。また、スマホユーザーはその場でルート案内を利用できるため、来店率向上にもつながります。
【方法1】GoogleマップをHTML埋め込みで表示する
もっとも簡単なのが、Googleマップの「共有」から埋め込みコードを取得して、WordPressに貼り付ける方法です。
- Googleマップを開く
- 表示したい場所を検索
- 左側のメニューから「共有」→「地図を埋め込む」タブを選択
- 表示サイズを選び、
<iframe>〜</iframe>コードをコピー - WordPressの固定ページや投稿で「カスタムHTML」ブロックに貼り付け
<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
【方法2】プラグインを使って表示する
よりカスタマイズしたい場合や、管理画面で簡単に地図を設定したい場合は、Googleマップ用のプラグインを使いましょう。おすすめは以下です：
- WP Go Maps（旧：WP Google Maps）
- MapPress Maps for WordPress
ここでは WP Go Maps を例に、使い方を解説します。
- WordPress管理画面 →「プラグイン」→「新規追加」
- 「WP Go Maps」で検索してインストール・有効化
- 「Maps」メニューから新規マップを作成
- 場所・ピン・ズームレベルなどを設定
- ショートコードをコピーし、投稿や固定ページに貼り付け
Google Maps APIの利用は必要？
シンプルな埋め込みであれば、Google Maps APIキーは不要です。しかし、プラグインで詳細なカスタマイズや複数ピンの追加などを行いたい場合は、APIキーの取得が必要です。
APIキーは以下の公式サイトから取得できます：
無料枠もありますが、一定量を超えると課金されるため注意が必要です。
マップのデザインをカスタマイズする方法
WordPressのテーマによっては、地図の幅や表示方法がうまく合わないこともあります。その場合は、以下のように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%; border: 0; }
このクラスを使用すると、スマホでも見やすいレスポンシブ対応になります。
表示されない場合の対処法
- iframeコードが正しく貼り付けられているか確認
- テーマがiframeを制限していないか調査
- プラグイン使用時はAPIキーの設定ミスをチェック
- キャッシュのクリア、または別ブラウザでの表示確認
まとめ
GoogleマップをWordPressに表示することで、ユーザーの利便性が高まり、検索エンジンからの評価も向上します。HTMLで直接埋め込むだけでなく、プラグインを使って自由にカスタマイズできる点も魅力です。あなたのサイトに最適な方法を選んで、ぜひ導入してみてください。
