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 にする場合は適宜変更が必要です。