2022/2/12 （更新日: 2022/2/14）

【まるっと解説！】Googleマップをレスポンシブで埋め込む方法

CSS

Googleマップの比率を保ちながらレスポンシブで埋め込むにはどうすればいいの？

そんな疑問にお答えします。

WebサイトをみるとGoogleマップを載せている場合が非常に多いです。

ということはGoogleマップを埋め込むコーディング方法はマスターしておかなくてはなりません。

とはいっても最初はなかなか上手くできなくて戸惑うものです。

この記事では

Googleマップの埋め込みタグの取得方法
縦横比の保ち方
レスポンシブ対応

について解説します。

一度やり方を覚えてしまえば使い回せますが、なぜそう書くのか？という型の理解はしっかりしておきましょう。

1 Googleマップの埋め込みタグの取得方法
2 縦横比を保ったままレスポンシブ対応させる方法
- 2.1 コード
- 2.2 解説
  - 2.2.1 縦横比とレスポンシブ対応
  - 2.2.2 横幅の指定
3 まとめ

Googleマップの埋め込みタグの取得方法

最初にGoogleマップの埋め込みタグを取得します。

まずはGoogleマップを開きます。

①マップを開いたら場所を検索します。

②「共有」をクリックします。

Googleマップ「検索」と「共有」

③ポップアップが開くので「地図を埋め込む」タブを選択します。

④共有用のコードが表示されるので「HTMLをコピー」します。

サイズ選択（小・中・大・カスタムサイズ）できますが、サイズはCSSで調整するのでそのままでOKです。

Googleマップの共有コードをコピー

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683714!2d139.74324421564378!3d35.65858048019955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1644623036555!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

このような埋め込みタグがコピーできます。

縦横比を保ったままレスポンシブ対応させる方法

コード

<div class="map">
  <div class="iframe-wrap">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683714!2d139.74324421564378!3d35.65858048019955!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1644623036555!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  </div>
</div>

.map {
  width: 100%;
  max-width: 800px;
}

.iframe-wrap {
  position: relative;
  width: 100%;
  padding-top: 75%; /* = height ÷ width × 100 */
}

.iframe-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

解説

縦横比とレスポンシブ対応

iframeタグをそのまま埋め込むだけではレスポンシブ対応されません。

レスポンシブ対応させるためには、iframeタグをdivタグで囲う必要があります。

このdivタグに対して縦横比を指定します。

今回は4:3の比率としています。

よって padding-top: 75%; （ = height ÷ width × 100 ）と指定します。

padding-topの解説についてはこちら

padding-topで要素の比率を保ちつつサイズを可変させる方法

あとは position:「relative」「absolute」でiframeを位置指定しています。

positionの解説についてはこちら

【初心者】position「relative」「absolute」を理解する方法

横幅の指定

横幅を指定するには、一番外側に全体を囲うdivタグをもうひとつ追加します。

<div class="map">
  <div class="iframe-wrap">
    <iframe src="https://www.google.com/maps/…省略></iframe>
  </div>
</div>

今回だと <div class=“map”></div> がこれに当たります。

.map {
  width: 100%;
  max-width: 800px;
}

一番外側に囲ったdivタグに対して横幅の指定を行います。

これで横幅が指定され、且つ比率を保ちながらレスポンシブ対応するGoogleマップが埋め込まれます。

まとめ

💡ポイント！　

一番内側にGoogleマップのiframe本体
その外側をdivタグで囲う（要素①）
要素①にpadding-topで縦横比指定
position「relative」「absolute」でiframe本体を配置
一番外側に全体を囲うdivタグを置く（要素②）
要素②に横幅を指定

上手くいくまで何度も試して自分のものにしましょう。

コメントを残すコメントをキャンセル

投稿者トシ