レスポンシブに対応したGoogle Mapの埋め込み方

Google マップの埋め込みコードを取得する

まずGoogle マップを開いて、掲載したい場所を検索する。住所よりも会社名・店舗名で検索すると、埋め込みコードにも名称が反映されるのでおすすめ。

場所が表示されたら「共有」→「地図を埋め込む」を選択する。サイズの選択肢が出てくるが、後からCSSで調整するためどれを選んでも問題ない。「HTMLをコピー」でコードを取得しよう。

【推奨】aspect-ratioを使ったモダンな方法

現代のブラウザでは aspect-ratio プロパティが利用できるため、よりシンプルにレスポンシブ対応ができるのだ。

HTML

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

CSS

/* Google マップのラッパー */
.map {
  width: 100%;
  aspect-ratio: 4 / 3; /* 比率を指定 */
}

/* iframeを親要素いっぱいに広げる */
.map iframe {
  width: 100%;
  height: 100%;
}

aspect-ratio を使うと padding-top のハックが不要になり、コードがすっきりするのだ。主要ブラウザはすべて対応済みなので、新規制作では積極的に活用しよう。

【従来の方法】padding-topハックを使う方法

古いブラウザのサポートが必要な場合や、既存コードとの互換性を保ちたい場合は従来の方法も有効なのだ。

HTML

<div class="map">
  <iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy">
  </iframe>
</div>

CSS

/* Google マップのラッパー（4:3比率） */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 4:3 = 100%:75% */
}

/* iframeを絶対配置で親に合わせる */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

height: 0 にして padding-top で高さを確保するテクニックなのだ。position: relative の親に対して position: absolute のiframeを配置することで比率を固定する。

マップの横幅を指定したい場合

マップを画面いっぱいではなく、特定の幅に収めたい場合はラッパーをもう一つ追加するのだ。

HTML

<div class="map-wrap">
  <div class="map">
    <iframe src="..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  </div>
</div>

CSS（aspect-ratio版）

/* 横幅を制限するラッパー */
.map-wrap {
  max-width: 600px; /* 任意の横幅 */
  width: 100%;
}

.map {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.map iframe {
  width: 100%;
  height: 100%;
}

まとめ

Google マップのレスポンシブ対応は以下の2つの方法で実現できるのだ。

• aspect-ratioを使う方法：モダンなCSS。コードがシンプルで可読性が高い（新規制作推奨）
• padding-topハックを使う方法：旧来からある手法。ブラウザ互換性が高い

新規でホームページを制作する場合は aspect-ratio を使う方法がおすすめなのだ！ホームページへのGoogle マップ埋め込みでお困りの際は、大阪のホームページ制作会社当社にお気軽にご相談を。