Googleマップを横幅100%でレスポンシブに表示する

harada 14,043views 更新:2015年6月8日

レスポンシブデザインのサイトにGoogleマップを埋め込む場合、デフォルトでは幅が指定されているため、画面の小さいデバイスではどうしても横幅が飛び出してしまいます。

そこで、以下のような調整を加えることで、スマホでも横幅100%で飛び出さずに表示させることができます。

HTML

iframeの外側に指定用のclassを追加する。
ex.ここではgoogle-mapsとしています。

<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) {
~
}

参考:新しいGoogleマップをレスポンシブ対応で埋め込む方法

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません