ウェブサイトでもよく使われているグーグルマップのインライン埋め込みですが、レスポンシブ対応にするためにはCSSで調整する必要があります。結構増えてきているケースなので備忘録としてのメモです。
グーグルマップのレスポンシブ対応
グーグルマップをレスポンシブ対応させるために、iframeを囲うwrap要素が必要です。それと合わせてiframe自体にもスタイルを適用していきます。以下HTMLとCSSのサンプルです。
【HTML】
<div class="googlemap-wrap"> <iframe src="https://www.google.com/maps/embed?pb=*****************" width="1000" height="500" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
【CSS】
.googlemap-wrap {
position: relative;
padding-bottom: 50%;
height: 0;
overflow: hidden;
}
.googlemap-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 576px) {
.googlemap-wrap {
padding-bottom: 100%;
}
}
CSSでグーグルマップwrap要素のpadding-bottomの値で縦横比を調整します。（上記は2：1の比率）また、スマホでの表示で比率を保つと高さも小さくなるので、メディアクエリーでwrap要素のpadding-bottomの値を100%にすることで当初の高さに戻ることができます。サンプルはこちらにあげていますのでご参考に。
