グーグルマップをホームページに載せたいとき、ただ地図のURLを貼ればよいのか、iframeのHTMLを貼る必要があるのかで迷いやすいです。さらに、WordPress、HTMLサイト、STUDIOやCanvaなど、使っているサービスによって貼る場所も少し変わります。
この記事では、グーグルマップの埋め込みHTMLを使う基本手順から、レスポンシブ対応、表示されないときの確認、店舗ページで見やすくする工夫まで整理します。自分のサイトではどの方法を選べばよいかを判断できるように、実務でつまずきやすい点も含めて説明します。
グーグルマップ埋め込みHTMLはiframeを貼れば使える
グーグルマップをホームページに埋め込む基本は、Googleマップの共有機能から取得できるiframe形式のHTMLを、ページ内の表示したい場所に貼る方法です。住所や店舗名を検索し、「共有」から「地図を埋め込む」を選ぶと、地図表示用のHTMLコードをコピーできます。通常の店舗案内やアクセスページであれば、この方法がいちばん簡単で、特別なプログラムを書く必要もありません。
ただし、ここで間違えやすいのが、ブラウザ上部に表示されているGoogleマップのURLをそのまま貼ってしまうことです。通常のURLはリンクとして開くためのもので、ページ内に地図を表示するためのHTMLではありません。ページ内に地図を直接表示したい場合は、iframeを含む埋め込み用HTMLを取得する必要があります。WordPressのカスタムHTMLブロックや、静的HTMLサイトの本文部分に貼る場合も、基本的な考え方は同じです。
もうひとつ大事なのは、無料で使える範囲とAPIを使う範囲を分けて考えることです。単に店舗の場所を表示するだけなら、Googleマップの共有から取得する埋め込みHTMLで十分なケースが多いです。一方で、検索結果を動的に変えたい、複数地点をプログラムで切り替えたい、独自デザインの地図を細かく制御したい場合は、Maps Embed APIやMaps JavaScript APIなど別の仕組みを検討します。まずは「アクセスマップを見せたいだけなのか」「地図機能をサイト内で作り込みたいのか」を分けて判断すると失敗しにくいです。
| やりたいこと | 向いている方法 | 注意点 |
|---|---|---|
| 店舗や会社の場所を表示したい | Googleマップの共有から埋め込みHTMLを取得する | 通常のURLではなく埋め込み用HTMLをコピーする |
| 地図をスマホ幅に合わせたい | iframeを囲む要素やCSSでレスポンシブ対応する | 固定幅のままだとスマホで横にはみ出すことがある |
| 複数店舗や検索条件を動的に変えたい | Google Maps PlatformのAPIを検討する | APIキー、制限、料金、実装の確認が必要になる |
| WordPressに貼りたい | カスタムHTMLブロックやテーマのHTML入力欄を使う | ビジュアルエディタに直接貼ると消える場合がある |
先に確認したい表示場所
HTMLを貼れる場所か見る
グーグルマップの埋め込みHTMLを使う前に、まず確認したいのは、自分が編集している場所にiframeを貼れるかどうかです。通常のHTMLファイルであれば、地図を表示したい位置に埋め込みHTMLを入れれば反映できます。WordPressの場合は、投稿や固定ページの本文にある「カスタムHTML」ブロックを使うと扱いやすいです。テーマ独自のページビルダーや、クラシックエディタを使っている場合は、HTMLモードやテキストモードに切り替えて貼る必要があります。
ノーコード系のサービスでは、iframeや埋め込みコードを許可している入力欄が用意されているかが重要です。単なるテキスト欄に貼っても、地図として表示されず、コードの文字列だけが出ることがあります。また、サービスによってはセキュリティ上の理由でiframeの貼り付けを制限している場合もあります。公開前にプレビュー画面だけでなく、実際の公開URLでも地図が表示されるか確認しておくと安心です。
サイト制作を誰かに依頼している場合は、「GoogleマップのURL」ではなく「Googleマップの埋め込みHTMLを貼りたい」と伝えると話が早くなります。制作側はiframeの横幅、縦幅、余白、スマホ表示の調整も合わせて対応できます。店舗のアクセスページ、会社概要ページ、問い合わせページなど、地図が必要なページは意外と多いため、どのページに表示するかを先に決めておくと、後から同じ作業を繰り返さずに済みます。
URLとHTMLの違いを押さえる
Googleマップには、主に「共有リンク」と「埋め込みHTML」の2つの使い方があります。共有リンクは、メールやLINE、ボタン、テキストリンクからGoogleマップを開いてもらうためのものです。一方、埋め込みHTMLは、ホームページの中に地図そのものを表示するためのものです。見た目はどちらもGoogleマップに関係していますが、使う場面が違います。
たとえば、スマホで道案内をしてほしい場合は、地図を埋め込むだけでなく「Googleマップで開く」というリンクを近くに置くと便利です。埋め込み地図はページ上で場所を確認するには向いていますが、ユーザーがそのままナビを開始したい場合は、Googleマップアプリで開ける導線があるほうが親切です。店舗サイトでは、地図の下に住所、最寄り駅、駐車場、電話番号、営業時間を並べると、来店前の不安を減らせます。
反対に、地図を表示したいだけなのに共有リンクだけを貼ると、ページ上にはただのテキストリンクやボタンしか出ません。これ自体が間違いではありませんが、読者がアクセスページを開いた瞬間に場所を把握したい場合には少し不親切です。目的が「地図を見せたい」のか「Googleマップへ移動させたい」のかを分けておくと、HTMLの貼り方もページの構成も決めやすくなります。
埋め込みHTMLの作り方
Googleマップから取得する
基本の流れは、Googleマップで店舗名や住所を検索し、表示したい地点を開いてから共有メニューを使う方法です。店舗名で検索すると、ビジネスプロフィールに登録された名称や口コミ、営業時間が表示されることがあります。住所で検索すると、建物や地点にピンが立つ形になります。どちらを使うかは、ユーザーに見せたい情報によって決めるとよいです。
店舗や会社の公式サイトに載せるなら、できれば店舗名や会社名で検索して正しい地点が選ばれているか確認しましょう。似た名前の店舗、移転前の住所、近隣の建物が表示されることもあります。特にテナントビル、商業施設、複数店舗が入る施設では、ピンの位置が少しずれるだけで来店時の迷いにつながります。埋め込み前に、地図上のピン、住所表記、名称が一致しているか見ることが大切です。
共有メニューから埋め込みHTMLを取得すると、横幅や縦幅が入ったiframe形式のコードが表示されます。小、中、大、カスタムサイズなどを選べる場合は、サイトのレイアウトに合わせて選びます。ただし、最初に表示される固定幅のコードをそのまま貼ると、スマホで見たときに横にはみ出すことがあります。パソコン画面だけでなく、スマホ表示を前提にサイズを考えることが実用上はかなり重要です。
HTMLサイトに貼る
自分でHTMLファイルを編集している場合は、アクセスページや問い合わせページの中で、地図を表示したい位置に埋め込み用のiframeを入れます。配置としては、住所や交通案内の近くに置くと自然です。先に住所を見せて、その下に地図を置く構成でもよいですし、地図を先に見せて、その下に徒歩時間や駐車場案内を補足する形でも構いません。重要なのは、地図だけで終わらせず、来店や訪問に必要な情報を近くにまとめることです。
HTMLサイトでは、横幅と高さの指定に注意します。固定幅が大きすぎるとスマホで崩れやすく、逆に高さが低すぎると地図が見づらくなります。パソコンでは横長、スマホでは縦に余裕を持たせると、ピンや周辺道路を確認しやすくなります。CSSを使えるなら、地図を囲む要素に最大幅を指定し、iframeの横幅を画面に合わせる形にすると扱いやすいです。
WordPressに貼る
WordPressでグーグルマップを埋め込む場合は、ブロックエディタなら「カスタムHTML」ブロックを使うのが分かりやすいです。通常の段落ブロックにHTMLを貼ると、コードが文字として扱われたり、保存時に一部が変換されたりすることがあります。固定ページの「アクセス」「会社概要」「お問い合わせ」などに入れる場合も、カスタムHTMLブロックに貼ってプレビューで確認しましょう。
テーマやページビルダーによっては、Googleマップ専用ブロックや埋め込みウィジェットが用意されていることもあります。その場合は、住所や埋め込みURLを入力するだけで表示できる場合があります。ただし、専用ブロックは便利な反面、細かい余白や高さ、スマホ表示の調整がテーマ側の仕様に左右されることがあります。デザインをきれいに整えたい場合は、カスタムHTMLとCSSで調整するほうが向いていることもあります。
見やすくする調整方法
スマホ表示に合わせる
グーグルマップの埋め込みHTMLをそのまま貼っただけでは、パソコンでは問題なくてもスマホで横にはみ出すことがあります。これは、取得したiframeに固定の横幅が入っているためです。スマホユーザーが多い店舗サイトやサービスサイトでは、地図が画面幅からはみ出すと、ページ全体が横スクロールして見づらくなります。アクセス情報は来店直前にスマホで確認されることも多いため、スマホでの見やすさは優先して確認したい部分です。
レスポンシブ対応の考え方は、地図の横幅を画面に合わせ、高さを見やすい範囲に整えることです。HTMLやCSSを編集できる場合は、iframeの横幅を親要素に合わせる指定にし、最大幅をページレイアウトに合わせます。高さは300pxから450px程度を目安にすると、スマホでも周辺道路やピンを確認しやすくなります。地図の上や下に余白を入れると、住所やボタンとの区切りも分かりやすくなります。
ただし、地図を大きくしすぎると、ページ内で他の情報が下に押し出されます。アクセスページでは問題になりにくいですが、トップページやランディングページでは、地図より先に見せたい情報がある場合もあります。来店型の店舗なら地図をしっかり見せ、資料請求や問い合わせが目的のページなら地図は必要な大きさに留めるなど、ページの目的に合わせて調整しましょう。
| 確認する画面 | 見たいポイント | 調整の目安 |
|---|---|---|
| スマホ | 横にはみ出していないか | 横幅は画面に合わせ、高さは300px以上を目安にする |
| パソコン | 地図が小さすぎないか | 本文幅に合わせ、周辺道路が見える高さにする |
| タブレット | 余白が不自然でないか | 住所や交通案内との距離を整える |
| 公開ページ | プレビューと同じ表示か | キャッシュやテーマ側の制限も確認する |
アクセス情報も添える
地図を埋め込むだけでは、ユーザーにとって十分でない場合があります。特に店舗や事務所の場合、初めて訪れる人は「最寄り駅から何分か」「駐車場はあるか」「建物の何階か」「入口はどこか」まで知りたいことがあります。地図は場所の全体像を伝えるのに向いていますが、現地で迷いやすい細かい情報は文章で補う必要があります。
たとえば、飲食店、美容室、整体院、展示会場、事務所などでは、住所の下に補足説明を置くと親切です。「〇〇駅東口から徒歩5分」「ビル1階の青い看板が目印」「店舗前に2台分の駐車スペースあり」「満車の場合は近隣コインパーキングを利用」など、実際に来る人の行動を想像して書きます。Googleマップ上のピンが正しくても、ビルの入口や駐車場の位置までは伝わりにくいことがあります。
表示されないときの確認
iframeが消えていないか
グーグルマップが表示されないときは、まず貼り付けたHTMLが保存後も残っているか確認します。WordPressや一部のCMSでは、セキュリティ対策としてiframeタグを削除することがあります。管理者権限でカスタムHTMLブロックを使う、テーマやプラグインのHTML入力欄を使うなど、許可された場所に貼り直しましょう。
次に、HTMLの一部だけをコピーしていないか確認します。埋め込み用コードは、iframeの開始から終了までがひとまとまりです。途中で欠けていると、地図が表示されなかったり、ページのレイアウトが崩れたりします。コピーするときは、Googleマップ側の「HTMLをコピー」を使い、余計な文字を足さずに貼るのが安全です。手作業で編集する場合も、src、width、height、loadingなどの属性を不用意に削らないようにしましょう。
ピン位置と店舗名を確認する
地図が表示されていても、ピンの位置がずれているとアクセスページとしては問題があります。Googleマップ上で店舗名を検索したときに、似た名前の別店舗、旧住所、近隣施設が表示されることがあります。埋め込み前に、表示名、住所、ピン位置を目視で確認しましょう。
ピン位置が細かくずれている場合は、住所だけではうまく指定できないことがあります。その場合は、Googleマップ上で正しい地点を選び直してから埋め込みHTMLを取得する、ビジネスプロフィールの情報を修正する、アクセスページに入口や目印の説明を足す、といった対応が考えられます。ユーザーが現地で迷わないことを目的に、地図だけに頼らず文章でも補いましょう。
APIが必要なケース
共有埋め込みで足りる場合
多くの店舗サイトや会社サイトでは、Googleマップの共有から取得する埋め込みHTMLで十分です。アクセスページに1つの地図を表示する、会社概要に所在地を載せる、イベント会場の場所を案内する、といった用途であれば、iframeを貼るだけで目的を達成できます。プログラムを書かずに使えるため、HTMLに詳しくない人でも導入しやすい方法です。
この方法が向いているのは、表示する場所が固定されている場合です。たとえば、店舗が1つだけ、事務所の所在地を表示するだけ、展示会場の住所を案内するだけなら、動的な地図機能は必要ありません。地図の周辺に住所、最寄り駅、駐車場、電話番号、営業時間を添えれば、ユーザーにとって十分分かりやすいアクセス情報になります。必要以上にAPIを使おうとすると、設定や管理が増えてかえって負担になることがあります。
ただし、共有埋め込みは細かいデザインや動作を自由に変えられるものではありません。地図の見た目、操作、情報表示はGoogleマップ側の仕様に沿います。色やピンのデザインを自社サイトに合わせたい、検索結果をサイト内で切り替えたい、複数拠点を一覧と連動させたい場合は、別の方法を検討する必要があります。まずは共有埋め込みで足りるかを考え、不足が明確になってからAPIを検討すると無駄が少ないです。
APIを検討したほうがよい場合
APIを検討したほうがよいのは、地図を単なる案内ではなく、サイトの機能として使いたい場合です。複数店舗を検索できる店舗一覧、現在地から近い拠点を表示する機能、検索条件に応じて地図の表示を変える仕組み、独自のピンや情報ウィンドウを使った地図などは、通常の埋め込みHTMLだけでは対応しにくいです。こうした場合は、Google Maps PlatformのAPIを使う設計になります。
APIを使う場合は、APIキー、利用制限、請求設定、ドメイン制限などを確認する必要があります。実装自体も、HTMLだけで完結するというより、JavaScriptや管理画面側の設計が関わることがあります。小規模な店舗サイトでアクセスマップを1つ表示するだけなら、APIを使うメリットはあまり大きくありません。一方で、多店舗展開、ポータルサイト、施設検索、予約導線と連動した地図表示では、APIを使う価値が出やすいです。
判断の基準は、地図を「見るだけ」か「操作して探すもの」にするかです。見るだけなら共有埋め込み、条件で探すならAPIという分け方をすると分かりやすいです。制作会社に依頼する場合も、「アクセスマップを1つ表示したい」のか「店舗検索機能を作りたい」のかを伝えると、見積もりや実装方法が大きく変わります。費用や管理の手間も変わるため、最初に目的を整理しておきましょう。
まずは公開ページで確認する
グーグルマップをHTMLで埋め込むなら、最初はGoogleマップの共有機能から埋め込みHTMLを取得し、表示したいページに貼る方法で十分なケースが多いです。WordPressならカスタムHTMLブロック、HTMLサイトなら地図を置きたい箇所、ノーコードサービスなら埋め込みコード対応のパーツを使います。貼った後は、編集画面だけで判断せず、公開ページで確認しましょう。
確認するときは、パソコン、スマホ、できればタブレットでも見ます。地図が横にはみ出していないか、ピンの位置が正しいか、住所や最寄り駅の説明と矛盾していないか、電話番号や問い合わせ導線が近くにあるかを見てください。アクセスページでは、地図だけを置くより、住所、交通手段、駐車場、営業時間、建物の目印を合わせて載せたほうが実用的です。
もし地図が表示されない場合は、貼る場所、HTMLの欠け、iframeの削除、セキュリティ設定、キャッシュを順番に確認します。地図表示をもっと細かく制御したい場合だけ、APIの利用を検討しましょう。まずは「1地点を分かりやすく見せる」「スマホで崩れない」「来店前に迷わない」の3つを満たすことを目標にすると、必要以上に難しく考えずに実装できます。
