ホームページにグーグルマップを埋め込み活用する完全ガイド最新版

2025 11/04

2025/11/04

はじめに

ホームページにGoogleマップを埋め込むと、訪問者が所在地を直感的に把握でき、来店や問い合わせにつながりやすくなります。本記事は、店舗や企業のWeb担当者向けに、実際に使える手順と注意点をやさしくまとめた入門ガイドです。

この記事の目的

ユーザーに場所をわかりやすく伝える方法を示します。
実装手順やCMSごとのポイント、デザイン調整のコツを紹介します。

対象読者

店舗のWeb担当者や企業の広報担当者
自社サイトに所在地情報を追加したい方
コードの基本が分かるが、実際の埋め込みは初めての方

本記事で学べること

Googleマップをホームページに埋め込むメリットと注意点
基本的な埋め込み手順とWordPressなどでの実装方法
レスポンシブ対応や見た目の調整方法、よくあるトラブル対処

次章から具体的な手順と設定について順を追って説明します。実例を交えて、無理なく進められる内容にしていますので、安心して読み進めてください。

Googleマップをホームページに埋め込むメリット

視覚的に場所が伝わる

地図を埋め込むと、住所だけでは伝わりにくい位置関係や目印が一目で分かります。来店前に周辺の雰囲気や最寄り駅、交差点などを確認できるので、初めての来訪者も安心して訪れやすくなります。

クリック一つで経路やナビへ移行できる

埋め込んだ地図からワンクリックで経路検索やスマホのナビアプリを起動できます。たとえばカフェや美容院なら、来店までの導線を短くし、来客につながりやすくなります。

信頼感と安心感を与える

実際の位置やストリートビュー、店舗写真が確認できると信用度が増します。診療所や事務所では所在地の明示が信頼につながり、問い合わせのハードルを下げます。

周辺情報や駐車場を示せる

近くの駐車場、バス停、ランドマークを地図上で示せば、来訪者の計画が立てやすくなります。イベント会場やショップの案内にも便利です。

スマホ対応でユーザー体験が向上

多くの人がスマホで情報を探します。地図がスマホでも見やすければ滞在時間が伸び、実際の来店や予約増加につながることがあります。

集客やSEOへの好影響（場合による）

直接の順位上昇を保証するものではありませんが、ユーザーが長く滞在したり、目的の情報にスムーズにたどり着ければ、間接的に評価につながることがあります。

具体例とおすすめの使い方

飲食店：メニューや営業時間と一緒に地図を表示すると来店率が上がります。
クリニック：最寄り駅と駐車場を明記することで予約の安心感が増します。
イベント：会場周辺の集合場所や待ち合わせスポットを地図で示します。

小さな工夫で、地図は案内の精度と信頼感を大きく高めます。

Googleマップを埋め込む基本手順

以下は、初心者の方でも迷わないように一つずつ丁寧に説明した手順です。

1. 地図を検索して表示を整える

Googleマップを開き、表示したい住所や店舗名を検索します。ピンの位置をドラッグして微調整し、ズームレベルで周辺の見え方を決めます（例：建物の位置だけを見せたいならズームを大きくします）。

2. 共有メニューから埋め込みコードを取得

画面左上の「共有」ボタンをクリックし、「地図を埋め込む」タブを選びます。表示されたiframeのコードをコピーします。サイズは大・中・小・カスタムから選べます。

3. コードの置き場所と簡単な編集

コピーしたiframeをホームページのHTMLソースやCMSのHTMLウィジェットに貼り付けます。カスタムサイズでは、widthとheightを指定できます。例：width=”600″ height=”450″。レスポンシブにする簡単な方法はwidth=”100%”にすることです。

4. 確認と公開

貼り付けたらプレビューで表示を確認します。表示位置やサイズが崩れている場合はwidthやheightを調整してください。読み込み速度が気になる場合はiframeにloading=”lazy”を追加すると有効です。

補足（よくある注意点）

プライバシーや表示内容に問題がないか確認してください。地図の表示は公開情報です。
大規模な機能やカスタマイズが必要なら、後でAPI連携を検討してください。

WordPressなどCMSでの埋め込み方法

1. 事前準備

Googleマップで表示したい場所を検索し、共有 → 「地図を埋め込む」からiframeコードをコピーします。必要ならAPIキーを取得してください（後述）。

2. ブロックエディタ（Gutenberg）の手順

固定ページや投稿を編集します。
「カスタムHTML」ブロックを追加します。
コピーしたiframeコードを貼り付け、プレビューで表示を確認して公開します。

例（iframeの一例）:

<iframe src="https://www.google.com/maps/embed?..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

3. クラシックエディタ／ウィジェット

クラシックエディタでは「テキスト」タブにiframeを貼ります。
外観 > ウィジェット > カスタムHTMLに貼ればサイドバーやフッターに表示できます。

4. 専用プラグインを使う方法

Google Maps Widget、WP Google Mapsなどを使うと、複数マーカー、スタイル変更、レスポンシブ設定が簡単です。プラグインによってはショートコード（例: [wpgmza id=”1″]）で挿入できます。プラグイン導入時は評価や更新日を確認してください。

5. 注意点と確認項目

SSL（https）でサイトを公開する。
APIキーが必要な場合は制限を設定する。
表示されないときはキャッシュやプラグインの競合、iframeのheight設定を確認してください。

レスポンシブ対応・デザイン調整

レスポンシブにする基本

スマホやタブレットでも地図を崩さないため、iframeの幅は必ず100%にします。単純にwidth=”100%”とすると横幅は親要素に合わせて伸縮します。

例（最小限）:

<iframe src="..." width="100%" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>

高さの決め方（推奨）

高さは固定にするより比率で決めると扱いやすいです。padding-bottomでアスペクト比を作る方法が安定します。

.map-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.map-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}

この方法なら画面サイズに合わせて縦横比を保てます。必要なら@mediaでスマホだけpadding-bottomを変えて高さを大きくできます。

最近のCSS（簡潔な書き方）

modernなブラウザではaspect-ratioが使えます。

iframe.map{width:100%;aspect-ratio:16/9;border:0}

見た目のカスタマイズ

枠線を消す、角を丸くする、影を付けるなどはCSSで簡単です。

iframe{border:0;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}

余白は親コンテナのpaddingやmax-widthで調整するとバランスが取りやすいです。

API利用時のデザイン調整

Maps JavaScript APIを使うと地図の色や表示要素を細かく変えられます。スタイル配列を渡して、店舗に合わせた色合いや表示のオン/オフを設定できます。コード量は増えますが、ブランドに合わせた地図デザインが可能です。

ポイント：レスポンシブは親要素の設計が鍵です。まずコンテナで比率を決め、その上で枠線や余白を調整してください。

埋め込み時の注意点

利用規約の遵守

Googleマップを埋め込む際は、利用規約や表示要件を守ってください。地図の著作権表示やリンク表示を消さないようにしましょう。商用利用や大量のリクエストには別途ライセンスが必要になる場合があります。

iframeコードの取り扱い

埋め込み用のiframeタグ内のsrcは、基本的に編集しないでください。URLのパラメータを変更すると位置情報がずれるリスクがあります。幅や高さ、CSSでの見た目調整やloading属性の追加は問題ありません。

読み込み速度の対策

loading=”lazy”を付けて遅延読み込みにすると初期表示が軽くなります。複数地図を同時に読み込まない、必要な場面では静止画（Static Map）を使うなどで表示速度を改善できます。

複数地図・ルート・ストリートビューの注意

複数の地図やルート案内、ストリートビューは可能ですが、表示が重くなりやすい点に注意してください。ルートには個人情報が含まれる場合があり、掲載前にプライバシー面を確認してください。

Googleビジネスプロフィールの活用

店舗や事務所を登録しておくと、地図の情報が正確になり信頼性が上がります。住所や営業時間、写真を最新に保つことをおすすめします。

Googleマップ埋め込みの効果的な活用例

用途別の具体例

店舗ページ：営業時間や写真、ピンを合わせた地図を表示します。来店経路を示すリンクを併記すると訪問率が上がります。
会社概要・アクセス案内：最寄り駅やバス停、駐車場の位置を明示します。拡大率を調整して周辺環境まで見せると分かりやすくなります。
イベント告知ページ：会場のピンに加え、近隣の駐車場や臨時入口を示すと来場者が迷いにくくなります。地図から会場への所要時間案内リンクを添えると親切です。

複数拠点や一覧表示

複数拠点がある場合は、各拠点ごとに小さな地図を並べるか、一覧から該当地図へジャンプできる構成にします。住所と地図を並べて表示すると、視認性が上がります。

問い合わせページ・フッターでの活用

問い合わせページ：地図と連動した経路案内リンクや営業時間を表示し、問い合わせ前の疑問を減らします。
フッター：サイト全体に常時表示する小型地図＋「地図を拡大」リンクを置くと利便性が向上します。

表示の工夫と運用ポイント

ピンのラベルやズームレベルを適切に設定し、モバイルでも見やすいサイズにします。地図が読めない場合に備え、テキストで住所とアクセス方法も必ず記載してください。

まとめ

Googleマップの埋め込みは、誰でも手軽に導入できる有効な施策です。店舗やオフィスの位置を直感的に伝え、来店や訪問を促進し、ユーザー体験を向上させます。

主なメリット: 視認性の向上、道案内の簡便化、信頼感の醸成、スマホユーザーへの対応。
基本手順: Googleマップで位置を確認し、共有→地図を埋め込む→iframeコードをコピーしてサイトに貼り付ける。CMSなら専用プラグインやブロックでさらに簡単です。
デザインと動作: レスポンシブ対応や表示領域の調整、読み込み速度への配慮を忘れないこと。必要に応じてAPI利用や表示項目の最適化を検討してください。
注意点: 表示速度、プライバシー、利用規約やAPIの制限を確認し、情報は定期的に更新しましょう。

実務のポイントは「見やすさ」と「正確さ」です。地図だけで終わらせず、住所や営業時間、行き方の補足情報を併記して、訪問につながる導線を整えましょう。

よくある質問とトラブルシューティング

地図を埋め込む際に起きやすい問題と解決策を、簡潔にまとめます。初めての方でも確認しやすい順に説明します。

地図が表示されないときのチェックリスト

iframeコードのコピー間違い：URLやiframeタグが途中で切れていないか確認してください。特に”src”の中身を見ます。
CMSがiframeを制限している：WordPressの編集モードやプラグインがiframeを消している場合があります。カスタムHTMLブロックやプラグイン設定を確認してください。
HTTPSの混在（Mixed Content）：サイトがHTTPSなのに埋め込みがHTTPだと表示しないことがあります。URLはhttps://から始まるか確認します。
広告ブロッカーやブラウザ設定：一時的に無効化して確認してください。