このページでは、静的HTMLサイトに Googleマップを表示するための全体像 をまとめています。
まずはシンプルに埋め込むところから始めて、スマホ対応（レスポンシブ） と 表示の軽量化 までを、Templyの3つのガイドページに分けて解説していきます。
このページの対象とゴール
このページは、次のような方を想定しています。
- 飲食店やサロンなど、来店型ビジネスのサイト を運用している
- お店の場所を、Googleマップで分かりやすく表示したい
- iframeの貼り付けは何となくできるが、スマホ対応や表示速度が不安
- 難しいJavaScriptは避けて、コピペ中心で対応したい
読み終わるころには、次の状態を目指します。
- マップの 基本的な埋め込み方法 が分かる
- スマホでもレイアウトが崩れない レスポンシブ対応 のイメージをつかめる
- ページの重さが気になってきたときに 軽量化の考え方 を押さえられる
Googleマップまわりは、「とりあえず埋める」→「スマホ対応」→「必要なら軽量化」 の順番で少しずつ整えていくのがおすすめです。このページでは、その3ステップを俯瞰してから、必要な詳細ガイドへ進めるように整理しています。
前提：Googleマップをサイトに載せるときの考え方
来店型ビジネスのサイトでは、Googleマップは次のような役割を持ちます。
- 初めてのお客さんに お店の場所と周辺のイメージ を伝える
- スマホから、そのまま ナビアプリを開いてもらう きっかけになる
- 店舗名で検索したときの Googleマップ上の情報 と連動しやすくなる
一方で、マップは 表示が重くなりやすい という側面もあります。
そのため、Templyでは次のような3ステップで整えていく方針をおすすめしています。
- STEP1：まずは「埋め込み」に慣れる
- STEP2：スマホでも崩れないよう「レスポンシブ対応」する
- STEP3：必要に応じて「軽量化（遅延読み込み）」を検討する
STEP1：まずはGoogleマップを埋め込む
最初のステップは、Googleマップの「共有」機能から 埋め込みコード（iframe） を取得し、サイトに貼り付けることです。
Templyのガイドでは、次の内容を中心に解説しています。
- Googleマップ側での「共有」→「地図を埋め込む」の手順
- iframeコードを
access.htmlなどに貼り付ける方法 - 最初に押さえておきたいサイズや属性（
loading="lazy"など）
複数のページやセクションにマップをたくさん置くと、それだけで表示が重くなりがち です。最初はアクセスページなど、ここだけは地図を見せたい というページに1つだけ置いてみるのがおすすめです。
STEP2：スマホでも見やすいようにレスポンシブ対応する
埋め込みができたら、次は スマホやタブレットでも見やすいレイアウト に整えます。
Templyのレスポンシブ対応ガイドでは、主に次のようなポイントを扱います。
- iframeを アスペクト比を保ったまま伸縮 させるCSSの書き方
- スマホでは高さを少し低めにするなどの メディアクエリの例
- 地図の下に住所やアクセス方法をセットで載せるレイアウトの考え方
マップだけだと、駅からの所要時間や目印 などが分かりにくい場合があります。地図の下に「徒歩◯分」「近くのランドマーク」などのテキストを添えておくと、初めての方にも親切です。
STEP3：必要に応じて軽量化（遅延読み込み）を検討する
マップの埋め込み数が増えたり、トップページに大きなマップを置いたりすると、ページの読み込み速度 が気になってくることがあります。
その場合は、次のような軽量化の工夫を検討します。
- 最初は地図画像だけ表示し、クリックされたときにiframeを読み込む
loading="lazy"を活用して、画面外のマップを後から読み込む- マップをトップページから外して、アクセス専用ページにまとめる
軽量化の工夫は、埋め込み・レスポンシブが整ったあと から着手しても大丈夫です。PageSpeed Insightsなどで速度が気になってきたら、少しずつ対策していきましょう。
よくあるつまづきとチェックポイント
マップが表示されない・真っ白になる
- 埋め込みコード（iframe）をHTMLの途中で壊していないか（タグの消し忘れなど）
<iframe>タグが<head>内に入っていないか（必ず<body>内に置く）- http/https が混在していないか（サイトがhttpsなら、マップもhttpsで取得されているか）
スマホでレイアウトが崩れる
- 固定ピクセルの幅・高さではなく、横幅100%＋アスペクト比固定 のスタイルにできないか
- 周囲のコンテナに
overflow:hidden;を付けて、はみ出しを防げないか
ページが重く感じる
- マップを使っているページの数を見直す（本当に必要なページだけに絞る）
- 軽量化ガイド にある、遅延読み込みパターンを検討する
ポイント：困ったときは「どのステップか」を切り分ける
表示の不具合が出たときは、埋め込みの問題なのか・CSSの問題なのか・軽量化のスクリプトなのか を切り分けて考えると原因にたどり着きやすくなります。
次のステップ：目的に合うGoogleマップガイドを開く
ここからは、実際にマップを埋め込みながら、必要に応じてレスポンシブ対応や軽量化を追加していきましょう。
Googleマップ表示まわりのガイド
検索まわりの設定もあわせて整える
マップページを作ったら、Search Consoleでインデックス状況を確認しておくと安心です。
Googleマップと相性の良い設定
実店舗を運営している場合は、Googleマップ上に表示される店舗情報も一緒に整えておくと効果的です。
