ホームページにGoogleマップを埋め込む方法｜お店の場所を迷わず伝える確認手順
お店や事務所の場所をホームページで案内するとき、Googleマップを載せておくと、住所だけでは分かりにくい道順を確認してもらえます。ただし、地図が表示されていても、別の場所にピンが立っている、スマホで横にはみ出す、住所移転後も古い地図が残るといったことがあります。
この記事では、Googleマップの共有画面から埋め込み用のHTMLをコピーする、一般的な方法を説明します。APIキーを使う開発者向けのMaps Embed APIは別の方式です。まずは二つを混ぜず、通常の埋め込みで必要な確認を順番に進めます。
地図を載せる前に、案内したい場所を確認する
埋め込みコードを取る前に、Googleマップで店舗名や住所を検索し、ピンが案内したい場所にあるか確認します。同じ建物に複数の店舗がある場合や、入口が裏通りにある場合は、地図だけでは迷うことがあります。
次の情報を一枚のメモにそろえておくと、地図の下に載せる案内文も作りやすくなります。
- ホームページへ表示する正式な住所
- 最寄り駅やバス停からの目安
- 建物名、階数、入口の場所
- 駐車場・駐輪場の有無と、利用前に確認してほしいこと
- Googleマップを別画面で開くリンク
住所を公開しない事業や、まだ事務所が決まっていない場合は、無理に地図を載せる必要はありません。先に事務所がない時にホームページへ住所を載せる考え方を確認し、相談時に公開範囲を整理します。
Googleマップから埋め込みコードを取得する
パソコンでGoogleマップを開き、案内したい場所を表示します。Googleの公式ヘルプでは、次の手順で埋め込み用のHTMLを取得できます。
- Googleマップで、店舗名または住所を検索する。
- 表示された場所とピンの位置が正しいか確認する。
- 「共有」を選ぶ。
- 「地図を埋め込む」を選ぶ。
- 地図の大きさを選び、「HTMLをコピー」を選ぶ。
画面の表示は変更される場合があります。操作に迷ったときは、Googleマップの共有・埋め込みに関する公式ヘルプで最新手順を確認してください。
コピーしたHTMLには、地図を表示するためのiframeが含まれます。住所の文字だけを自分で書き換えず、場所が違う場合はGoogleマップへ戻り、正しい場所からコードを取り直します。
WordPressへ貼る時はカスタムHTMLを使う
WordPressのブロックエディターでは、地図を置きたい場所にカスタムHTMLブロックを追加し、コピーしたHTMLを貼り付けます。保存前のプレビューだけでなく、更新後の通常ページも開いて確認してください。詳しい編集方法はWordPress公式のカスタムHTML案内で確認できます。
WordPress 7.0以降の公式文書では、unfiltered_htmlという権限を持たない利用者が保存した場合、iframeなど許可されていないタグが取り除かれることがあると案内されています。貼り付けた直後は見えていたのに、保存後に地図が消える場合は、何度も貼り直す前に自分の権限とサイトの設定を管理者や制作会社へ確認します。
通常の埋め込みとMaps Embed APIは別の方法
この記事の基本手順は、Googleマップの共有画面から取得したHTMLを貼る方法です。一方、開発者向けのMaps Embed APIは、Google CloudのプロジェクトやAPIキーを使って地図の表示内容を指定する別の仕組みです。
店舗の場所を一つ案内するだけなら、まず通常の埋め込みで目的を満たせるか確認します。経路・検索・Street Viewなど、API固有の表示モードや制御が必要な場合は、Maps Embed APIの公式概要を制作会社と確認します。APIキーやGoogle Cloudの設定を、通常埋め込みの必須作業として始める必要はありません。
地図だけでなく、迷いやすい点を文章で補う
地図は位置を確認する道具であり、入口や建物内の移動まですべて伝えられるわけではありません。地図の近くには、住所、最寄り駅やバス停、入口、階数、駐車場の案内を必要な範囲で書きます。
スマホで道順を見たい人のために、「Googleマップで大きな地図を開く」リンクも用意します。リンク先が別の場所になっていないか、ログインしていない状態でも開けるかを確認します。営業時間や休業日の管理は本記事の範囲を広げすぎるため、必要な場合はGoogleビジネスプロフィール活用の記事で別に確認します。
公開後はPCとスマホで4段階を確認する
保存できたことだけで完了にせず、利用者が見る通常ページで次の順に確認します。
| 順番 | 確認すること | 問題がある時 |
|---|---|---|
| 1. 場所 | ピン、住所、店舗名が正しい | Googleマップで正しい場所を開き、コードを取り直す |
| 2. 保存 | 更新後も地図が残っている | WordPressの権限、HTMLの除去、セキュリティ設定を確認する |
| 3. 大きさ | PCとスマホで横にはみ出さず、地図の高さも不自然でない | テーマ側の表示幅や埋め込み部分の設定を制作会社へ確認する |
| 4. リンク | 大きな地図を開くリンクが正しい場所へ進む | 共有リンクを取り直し、未ログイン状態でも試す |
地図を指で動かせるかだけでなく、その操作がページ全体のスクロールを邪魔しないかもスマホで確認します。問い合わせボタンや住所案内が地図の下へ離れすぎていないかも見ます。
表示されない・場所がずれる時の切り分け
別の場所が表示される
HTMLの中の住所を直接書き換えるのではなく、Googleマップで正しい場所を表示し直し、共有画面からコードを取り直します。同じ建物内に複数の候補がある場合は、店舗名と住所を見比べます。
保存すると地図が消える
WordPressの利用者権限やセキュリティ設定によって、iframeが保存時に取り除かれることがあります。コードを短くしたり別のサイトからコピーしたりせず、管理者へ「カスタムHTML内のiframeが保存後に残るか」を確認します。
スマホで横にはみ出す
地図の幅と、テーマの本文幅が合っていない可能性があります。埋め込みコードだけでなく、ページ全体の表示設定も関係します。地図の下だけを見て直さず、320px前後の狭い画面でもページ全体が横へ動かないか確認します。
地図を開くリンクが違う
埋め込み用のHTMLと、別画面で開く共有リンクは役割が違います。リンク先を実際に開き、正しい場所が表示されるか確認します。
住所や入口が変わった時は、地図・文章・リンクを一緒に見る
住所や入口が変わった時は、埋め込み地図だけを直して終わらせません。地図の近くにある住所案内、最寄り駅、入口、駐車場、大きな地図を開くリンクも同じ回で確認します。
会社情報、フッター、問い合わせ完了メール、Googleビジネスプロフィールなど、住所移転時に直す場所の全体は住所移転後のホームページ対応へ役割を分けます。本記事では、地図周辺の案内が食い違わないことだけを確認します。
自分で直すか、制作会社へ相談するか
場所の確認、共有画面からのHTML取得、公開後のリンク確認は、自分でも進めやすい作業です。一方、保存するとiframeが消える、スマホで横にはみ出す、テーマの編集が必要、どの住所を公開するか決まらない場合は、制作会社へ相談するほうが安全です。
相談するときは、対象ページのURL、表示したい場所、現在の困り事、PCとスマホのどちらで問題が出るかを伝えます。これまでの制作例は制作実績で確認できます。地図だけでなくアクセス案内や問い合わせまで一緒に整えたい場合は、お問い合わせから現在の状況をお知らせください。
まとめ
Googleマップの通常埋め込みは、正しい場所を表示し、「共有」「地図を埋め込む」「HTMLをコピー」の順で進めます。APIキーを使うMaps Embed APIは別の方法なので、基本手順へ混ぜません。
公開後は、場所、保存、大きさ、リンクの順でPCとスマホを確認します。地図の近くに住所、入口、駐車場など必要な案内も添えると、初めて来る人が次に何を確認すればよいか分かりやすくなります。
