Googleマップの埋め込みをCSSでレスポンシブ対応

Googleマップを埋め込む時に、レスポンシブ対応させるサンプルです。
ブラウザの幅に合わせて縦横比を維持して縮小・拡大します。

比率スタイルの指定なし

Googleマップで【共有＞地図を埋め込む＞「中」の埋め込みコードをコピペ】したのみ。

表示確認

aspect-ratioで縦横比を指定

aspect-ratioを使って縦横比を指定します。ピクセル数から比率を出すなら、比率計算機ツールが便利です。比率計算機 - instant tools

html


            <div class="googlemap_iframe-1">GoogleMapの埋め込みコード</div>

css


            .googlemap_iframe-1 {
              max-width: 1000px;
              aspect-ratio: 16 / 9;
              iframe {
                height: 100%;
                width: 100%;
              }
            }

表示確認

aspect-ratio: 16 / 9;

aspect-ratio: 21 / 9;

paddingで縦横比を指定

padding-bottomを使って比率を指定します。

html


          <div class="googlemap_iframe-2">GoogleMapの埋め込みコード</div>

css


          .googlemap_iframe-2 {
            max-width: 1000px;
            padding-bottom: 56.25%;
            position: relative;
            iframe {
              height: 100%;
              width: 100%;
              position: absolute;
            }
          }

padding-bottom: 56.25%;は、16:9の比率にさせる指定です。（9÷16=0.5625）
4:3なら75%、1:1なら100%、その他任意に調整できます。

表示確認