Googleマップをレスポンシブ対応したい

このページでは、すでに埋め込んである Googleマップのiframe を、スマホでも横にはみ出さず見やすく表示するための レスポンシブ対応 を解説します。

HTMLの埋め込みコードはそのままに、CSS側の調整だけで対応する方法にしぼっています。

このページの対象とゴール

このページは、次のような方を想定しています。

• すでに Googleマップの埋め込み は終わっている
• PCでは問題ないが、スマホで地図がはみ出したり、縦長すぎたりして気になる
• JavaScriptはなるべく使わず、CSSだけでシンプルに対応したい

読み終わるころには、次の2パターンの違いと使い分けがイメージできるようになります。

• パターンA：iframeの横幅だけを100%にする、かんたん対応
• パターンB：ラッパー要素を使って、縦横比を保ったまま拡大縮小する方法

固定サイズのままだと何が起こる？

Googleマップの埋め込みコードは、初期状態だと次のような指定になっていることが多いです。

<iframe
  src="https://www.google.com/maps/map/embed?pb=..."
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade">
</iframe>

このままだと、次のような問題が起こりがちです。

• スマホ画面が 幅320〜390px 程度なのに、width="600" のままで 横スクロールが必要 になる
• ページ全体のレイアウトはレスポンシブなのに、地図だけが固定サイズで不自然に見える
• 縦長すぎて、地図ばかりが画面を占めてしまう

パターンA：まずは横幅100%にする

最もかんたんな対応は、iframeの 横幅を100% にして、高さだけ固定にする方法です。

HTML側：ラッパー要素を用意しておく

埋め込み済みのHTMLが、次のようになっているとします。

<section class="access">
  <h2 class="section-title">アクセス</h2>
  <p>○○駅から徒歩3分、△△通り沿いです。</p>

  <div class="access-map">
    <iframe
      src="https://www.google.com/maps/map/embed?pb=..."
      width="600"
      height="450"
      style="border:0;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
  </div>
</section>

access-map のようなラッパーがあれば、その中の iframe に対してCSSを当てやすくなります。

CSS側：width:100% でスマホの横幅に合わせる

次のようなCSSを、assets/css/style.css の下のほうに追加します。

/* アクセスページのGoogleマップをレスポンシブに */
.access-map iframe {
  width: 100%;
  max-width: 100%;
  height: 320px;   /* スマホでも見やすい高さに調整 */
}

/* 画面が広いときは少し高さを増やす */
@media (min-width: 768px) {
  .access-map iframe {
    height: 400px;
  }
}

これで、画面幅に応じて 横いっぱいにマップが広がり、スマホでも横スクロールが出にくくなります。

パターンB：縦横比を保ったままレスポンシブ表示する

もう少し見た目を整えたい場合は、縦横比を保つためのラッパー要素を使う方法があります。

HTML側：ラッパーにクラスを追加する

先ほどのHTMLに、map-responsive というクラスを追加します。

<div class="access-map map-responsive">
  <iframe
    src="https://www.google.com/maps/map/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
  </iframe>
</div>

CSS側：縦横比をCSSで管理する

次のどちらかの方法がおすすめです。ここでは、より新しい aspect-ratio を使う方法を紹介します。

/* 縦横比を保ちつつ、横幅いっぱいに表示 */
.map-responsive iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;  /* お好みで 16/9 などに変更可能 */
  border: 0;
}

aspect-ratio: 4 / 3; としておくと、画面幅に合わせて自動的に高さが決まるため、PCでもスマホでもバランスの良い縦横比を保ちやすくなります。

.map-responsive {
  position: relative;
  padding-top: 65%;  /* 縦横比の目安（4:3くらい） */
}

.map-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

よくあるつまづきとチェックポイント

地図の横幅が広がらない / 右側が空く

以下の点を確認してみてください。

• iframe に width:100%; が当たっているか
• 親要素（例：.access-map）に max-width が指定されていないか
• PC向けのレイアウトで display:flex; などを使って、横幅が制限されていないか

スマホで縦長になりすぎる

縦長になりすぎて気になる場合は、次のような調整が有効です。

• aspect-ratio を 3 / 2 や 16 / 9 に変えてみる
• 小さい画面だけ高さを少し低めにするメディアクエリを入れる

@media (max-width: 480px) {
  .access-map iframe {
    aspect-ratio: 16 / 9;
  }
}

次のステップ：Googleマップ周りをさらに整える

レスポンシブ対応ができたら、読み込み速度や検索周りも含めて、地図まわりの環境を少しずつ整えていきましょう。

埋め込み〜レスポンシブ〜軽量化を整理する

「とりあえず表示する」ところから、「スマホでも見やすく、できるだけ軽い」状態まで、一度流れを振り返っておくと安心です。

アクセス解析（GA4）の設定を進める

サイトに来た人の動きや人気ページを把握したい場合は、GA4の導入とイベント計測を設定しておくと便利です。

Search Console関連の設定を見直す

Search Consoleの基本設定・サイトマップ・インデックス状況をセットで押さえておくと安心です。

Googleマップと相性の良い設定

実店舗を運営している場合は、Googleマップ上に表示される店舗情報も一緒に整えておくと効果的です。