Google map を横幅100%でレスポンシブに

Date 2016年2月10日 Author By idii Category 未分類

HTML

<div class=”google-maps”>
<iframe src=”https://www.google.com/maps/embed?pb=xxxxx”
width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>
</div>

CSS

.google-maps {
position: relative;
padding-bottom: 75%; // これが縦横比
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

横幅100%を適用するのがスマホなどの特定のサイズ以下のデバイスのみで良い場合は、CSSを以下のメディアクエリで囲うと適用されます。

@media (max-width: 767px) {
~
}