gotohayato.com

月(ダークモード)
太陽(ライトモード)

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

CSS

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


hg

後藤隼人 (ごとうはやと)

ウェブ制作・開発やマーケティング、プロジェクト支援などをしています。

githubpython

お知らせ

大阪大学子どものこころの分子統御機構研究センターさんが 10 月 20 日までクラウドファンディングをされています(後藤も少しだけ寄附させていただきました)。
© 2021 gotohayato.com
サイトについてタグアーカイブメッセージを送る