gotohayato.com

moon indicating dark mode
sun indicating light mode

Google Maps の埋め込み地図をレスポンシブにする方法

2016/03/11CSS

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

関連記事


後藤隼人
個人事業でウェブ開発やマーケティングをしています。
GitHub
© 2020 gotohayato.com
サイトについてタグ一覧記事アーカイブ