Googleマップを横幅100%でレスポンシブに表示する

レスポンシブデザインのサイトにGoogleマップを埋め込む場合、デフォルトでは幅が指定されているため、画面の小さいデバイスではどうしても横幅が飛び出してしまいます。

そこで、以下のような調整を加えることで、スマホでも横幅100%で飛び出さずに表示させることができます。

HTML

iframeの外側に指定用のclassを追加する。
ex.ここではgoogle-mapsとしています。

<div class="google-maps">
            <iframe src="https://www.google.com/maps/embed?pb=xxxxx"
                    width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

CSS

.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

横幅100%を適用するのがスマホなどの特定のサイズ以下のデバイスのみで良い場合は、CSSを以下のメディアクエリで囲うと適用されます。