Google Maps の埋め込み地図をレスポンシブにする方法
Google Maps の埋め込み地図をレスポンシブ化する方法について。
Google Maps の埋め込み用コードはそのまま埋め込んでもレスポンシブになってくれません。
ラッパー div を作成してラッパーに padding
( padding-bottom
) を指定するちょっとハック的な方法が主流です。
CSS(SCSS):
// google-maps-wrapper クラスを iframe の周りの div に付ける
// @see http://www.labnol.org/internet/embed-responsive-google-maps/28333/
.google-maps-wrapper {
position: relative;
// アスペクト比
// 横:縦 = 4:3 にする場合は 75%
// 横:縦 = 9:16 にする場合は 56.25%
padding-bottom: 75%;
height: 0;
overflow: hidden;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
}
HTML:
<div class="google-maps-wrapper">
<!-- ここに Google Maps 埋め込み用の iframe を入れる -->
</div>
上のコードは SCSS スタイルで書いているので CSS にする場合は適宜変更が必要です。