Googleマップをレスポンシブに埋め込む方法

会社概要やアクセスページで Google マップを埋め込むとき、画面サイズに合わせて縦横比を維持したい場合があります。
以下の方法を使うと、PC・スマホどちらでも崩れずに表示できます。

1 サンプルHTML

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

2 基本のCSS

/* -----------------------------
 * google-maps
----------------------------- */

/* ラッパーの設定 */
.google-maps {
    position: relative;    /* 子要素（iframe）を絶対位置で配置するための基準にする */
    margin: 40px 0;        /* 上下に40pxの余白を作り、周囲の要素とスペースを確保 */
    padding-bottom: 75%;   /* 高さの比率を設定。16:9なら56.25%、ここは好みや用途に応じて変更可能 */
    height: 0;             /* 実際の高さはpadding-bottomで作るので0に設定 */
    overflow: hidden;      /* iframeがラッパーからはみ出さないようにする */
}

/* iframe（マップ本体）の設定 */
.google-maps iframe {
    position: absolute;       /* ラッパー内で絶対位置に配置して重ねる */
    top: 0;                   /* 上端をラッパーの上端に合わせる */
    left: 0;                  /* 左端をラッパーの左端に合わせる */
    width: 100% !important;   /* ラッパー幅いっぱいに広げる。importantで上書きされる場合も対応 */
    height: 100% !important;  /* ラッパー高さに合わせてiframeも伸縮させる */
}

3 縦横比の調整方法

ラッパー .google-maps の padding-bottom の値を変更すると、マップの高さ比率を自由に変えられます。

• 16:9（標準ワイド画面）: padding-bottom: 56.25%;
• 4:3（やや縦長）: padding-bottom: 75%;
• 1:1（正方形）: padding-bottom: 100%;

このように比率を調整すると、スマホやタブレットでもマップの縦横比が崩れず、見やすい表示になります。

4 完成イメージ

5 まとめ

Google マップを埋め込む際は、ラッパーを作って padding-bottom で高さを調整し、iframe を絶対位置で配置することで、レスポンシブ対応が簡単にできます。
比率を変えるだけで、用途に応じた表示サイズに変更可能です。