小ネタ君「Googleマップを自分のWordPressサイトに埋め込んでみたいけど難しそう……」そんな不安を感じたことはありませんか？
この記事では、初心者でも簡単にできるGoogleマップの埋め込み方法を丁寧に解説します。
WordPressにGoogleマップを埋め込むメリットとは？
WordPressにGoogleマップを埋め込むことで、サイトの利便性や信頼性が大きく向上します。特にビジネスやサービスを提供している方にとっては、「場所を伝えること」は非常に重要な要素です。このセクションでは、Googleマップを導入することの具体的なメリットを解説します。
店舗や施設の場所を視覚的に伝えられる
例えばカフェや病院など、場所を正確に伝える必要がある業種では、地図の掲載が欠かせません。テキストだけでは伝わりにくい情報を、地図によって一瞬で理解してもらえるのは大きな強みです。
また、地図を見ることで「実際に行けそうか」「駅から近いか」といった判断材料にもなります。これにより、来店前の心理的ハードルを下げる効果も期待できます。
ユーザーのアクセスをスムーズにできる
スマートフォンでGoogleマップを表示すれば、そのままナビゲーションアプリを起動することができます。「ここに行ってみたい」と思った瞬間に行動につなげてもらえる仕組みが自然とできあがるのです。
また、周辺施設や交通手段も地図上で確認できるため、特に初めての来訪者には大きな安心感を与えるでしょう。地図上で現在地と目的地の距離感がつかめるのも利点です。
SEO評価の向上にもつながる可能性
Googleはローカル検索において、地理的情報の有無を評価要素の一つとしています。Googleマップの埋め込みによって、サイト内にロケーション情報を明示できる点は、SEOの観点からも効果的です。
さらに、Googleビジネスプロフィールと一致した住所情報を提供することで、検索結果に表示されやすくなります。地域密着型のビジネスにとっては、特に大きな利点となるでしょう。
モバイルユーザーにも優しい設計が可能
昨今では、スマートフォンからのアクセスが多数を占めています。Googleマップはモバイル対応に優れており、小さな画面でもスムーズに操作できます。
特に、スマホ対応が不十分なサイトでは離脱率が高まる傾向があるため、Googleマップの導入はUI改善の一環としても有効です。モバイルユーザーの使いやすさは、コンバージョンにも直結します。
Googleマップを埋め込むために必要な準備
埋め込み作業の前に、Googleマップの操作やコード取得方法を知っておくとスムーズです。このセクションでは、初心者が迷わず準備を進められるよう、具体的な手順を紹介します。
Googleマップで目的の場所を検索する
Googleマップで、掲載したい店舗や施設の正確な住所を検索します。
特に類似名称がある場合や、マンション・ビル名などが被っている場合は、正確な住所かどうかを再確認しましょう。地図の位置ズレや誤誘導を防ぐことが大切です。
「共有」→「地図を埋め込む」手順を確認
ピンの立った場所の情報カードにある「共有」ボタンをクリックし、「地図を埋め込む」タブを選択します。そこに表示されるHTMLコードが埋め込み用のiframeです。
この操作はPCから行うとスムーズです。スマートフォン版のGoogleマップでは埋め込み機能が制限されているため、できるだけPCで作業しましょう。
iframe形式とURL形式の違いとは？
iframe形式はページ内に地図を表示できるコードで、ユーザーはページ遷移なしで場所を確認できます。一方、URL形式は別タブでマップを開くため、閲覧の流れが途切れやすくなります。
リンク共有と埋め込みコードを混同する人は多いため、初心者は「iframeという単語が入っているか」で判断するのも一つの方法です。
埋め込み用コードの取得方法
「HTMLをコピー」ボタンをクリックすると、iframeタグがコピーされます。これをWordPressに貼り付けるだけで埋め込みが可能です。
※コピーしたコードのURL部分は、ご自身の店舗や目的地のURLに置き換えてください。ダミーの埋め込みコードを使ったまま公開しないように注意しましょう。
WordPressへGoogleマップを埋め込む方法【基本編】
このセクションでは、WordPressの標準機能を使って、Googleマップを実際に埋め込む方法を解説します。クラシックエディタとブロックエディタの両方に対応しています。
クラシックエディタで埋め込む手順
管理画面から投稿や固定ページを開き、エディタの「テキスト」タブを選択します。そこにコピーしたiframeコードをそのまま貼り付けます。
ビジュアルタブに戻るとマップは表示されませんが、プレビューを押せばきちんと表示されるので心配はいりません。
ブロックエディタ（Gutenberg）の埋め込み方法
「カスタムHTML」ブロックを挿入し、iframeコードを貼り付けます。プレビューでマップが表示されていれば、正常に動作しています。
Gutenbergは構造が明確なため、HTMLブロックの中でコードが崩れることも少なく、初心者にも扱いやすいのが利点です。
iframeコードの貼り付け場所に注意
コードを本文の途中に挿入する際は、前後に段落があるか確認しましょう。タイトル直下や画像と重なる場所に埋め込むと、レイアウトが崩れることがあります。
テーマによってはiframeタグが正常に表示されないケースもあるため、事前に使用テーマの仕様を確認し、必要に応じてCSSで調整しましょう。
スマホでも最適に表示させるコツ
<iframe src="https://www.google.com/maps/embed?pb=..." width="100%" height="300" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
※上記のコードは一般的な埋め込みコードの例です。ご自身のGoogleマップから取得したコードを使用してください。
上記のようにwidth="100%"を指定することで、スマートフォンでも画面幅にフィットします。高さは300〜400pxが推奨です。レスポンシブ対応でないテーマでも、この指定である程度は柔軟に表示されます。
プラグインを活用した応用設定
ここでは、より高度なマップ機能を実現したい場合の手法を紹介します。ビジネスサイトや多拠点展開のある事業者にとっては、標準の埋め込みでは不十分なケースもあります。そんなときに活用できるのがGoogleマップ対応のWordPressプラグインです。
WP Go Maps (formerly WP Google Maps)
WP Go Mapsは、ピンのカスタマイズ、複数地点の登録、地図のデザイン変更などが行える定番プラグインです。（2025年7月現在）
無料版でも基本的な機能は十分で、有料版ではルート案内やカスタムレイヤーにも対応しています。
APIキーの取得と設定
一部のプラグインでは、Google Maps Platformで取得したAPIキーの入力が求められます。これはGoogleがマップサービスに対してトラフィック管理や課金処理を行うための仕組みです。
APIキーはGoogle Cloud Consoleから取得可能です。最初の利用には無料枠がありますが、上限を超えると課金が発生するため、使用量の確認は必ず行いましょう。
使用例：業種別活用方法
| 業種 | 活用ポイント |
|---|---|
| 飲食店 | メニューの近くに地図を配置し、来店を促す |
| 不動産 | 複数物件のマッピングで比較しやすくする |
| 医療機関 | 駅からのルート案内を強調して安心感を提供する |
このように、Googleマップの活用は業種ごとに工夫の余地があり、ユーザーの行動につなげる重要なツールとなります。
まとめ
小ネタ君GoogleマップをWordPressに埋め込む方法は、基本的な操作から応用まで段階的に身につけることができます。
今回の記事では、マップの取得方法から埋め込み手順、さらにプラグインを使った高度な設定までを丁寧に解説しました。
初心者であっても、「地図をページに表示したい」という目的がはっきりしていれば、決して難しい作業ではありません。
しかも、ユーザーの利便性や信頼感の向上、さらにはSEOへの好影響といった多くのメリットをもたらします。
この記事を参考に、ぜひご自身のWordPressサイトにGoogleマップを活用してみてください。
地図を載せるだけで、サイト全体の印象や使いやすさが大きく変わるはずです。
