Googleマップをホームページに埋め込む方法｜店舗の場所とスマホ表示を確認

Googleマップの共有機能から地図を取得し、WordPressへ載せる手順。似た店名の取り違え、入口の案内、埋め込みが消える場合、スマホでの確認も説明します。

店舗や教室のアクセスページには、Googleマップの共有機能で取得した地図を埋め込めます。作業は「場所を選ぶ→埋め込みHTMLを取得する→ページに貼る→訪問者の状態で確認する」の順です。

地図が表示されても、別支店を指していたり、入口が分からなかったりすると案内としては不十分です。地図と一緒に住所、建物名、入口の説明、Googleマップを別画面で開くリンクを用意しましょう。

1．店名だけで選ばず、住所とピンを照合する

パソコンでGoogleマップを開き、対象の店舗・施設や住所を検索します。同じ名前の施設が複数ある場合は、支店名と住所を確認してから共有します。

ピンの位置と実際の入口が異なる場合は、地図だけで説明を完結させず、ページ本文で補います。地図上の掲載情報そのものに誤りがある場合、ホームページへ貼る操作だけでは修正されません。

例えば架空の教室なら「建物の東側の入口から2階へ。駐輪場所は入口の案内をご確認ください」のように、現地で確認できた情報を書く設計が考えられます。方角や設備は推測して書かず、確認できない項目は掲載前に運営者へ確認します。

対象の場所を表示した状態で、共有または地図の共有・埋め込みのメニューを開きます。「地図を埋め込む」側で表示を確認し、HTMLをコピーします。別画面用のリンクは、リンク共有の側からコピーします。

取得するもの	貼る場所	用途
共有リンク	文字やボタンのリンク先	Googleマップを別画面で開く
埋め込みHTML	カスタムHTMLなどの対応領域	ホームページ内に地図を表示する

共有リンクを通常の段落へ貼っただけでは、想定した大きさの地図になるとは限りません。反対に、埋め込みHTMLをボタンのURL欄へ貼るものでもありません。貼り付ける欄を分けて考えてください。

この記事はGoogleマップの共有・埋め込み操作を対象にしています。独自の検索画面や複数拠点の連動表示など、APIを使う地図開発は別の作業です。

HTMLを編集する必要がある場合は、取得したコードの控えを残します。地図の参照先URLを手で作り直すより、正しい場所を開いて共有機能から取得し直す方が、取り違えを防ぎやすくなります。

住所を地図の画像内だけに閉じ込めず、本文でも読めるようにすると、地図が表示されない場合にも所在地を確認できます。電話番号を載せる場合も、運営者が確認した番号を本文へ記載します。

PCのプレビューだけで終えず、スマホの縦画面で公開ページを開きます。地図が横にはみ出す、本文のスクロールを妨げる、下の説明まで進みにくいなど、実際の操作で確認します。

埋め込みコードの固定幅が原因であれば、テーマの本文幅に合わせた調整を検討します。幅を100%にする場合も、保存後の見え方を確認してください。サイト側のCSSで上書きされていると、コードの幅だけを変えても改善しない場合があります。

地図を操作しづらい人のために、別画面のリンクは地図の外に置きます。リンク先を開いた後、目的の施設名と住所が一致するところまで確認します。

WordPressでは権限によってiframeなどのHTMLが保存時に取り除かれることがあります。表示のために一律で制限を外す前に、管理者が認める掲載方法を確認します。埋め込みが使えない環境でも、住所と共有リンクによる案内は可能です。

移転や入口の変更があったら、地図、住所、建物名、アクセス説明、問い合わせページ、配布物のリンクをまとめて点検します。地図だけ新住所に直しても、本文が旧住所のままなら来訪者は判断できません。

点検メモには「掲載ページ／施設名／住所／最終確認日」を残します。公開前のほかの画面確認はスマホで行うサイト公開前チェックも参考になります。

図は独自の模式図で、Googleマップの実画面や実在施設の地図ではありません。確認順は編集部の提案です。公式資料確認日：2026年10月14日。