HTML
CSS
JavaScript

ページに埋め込んだGoogleMapをレスポンシブ対応させる方法

More than 3 years have passed since last update.


html

<div class="gmap">

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8255202704836!2d139.76405821495072!3d35.68129798019423!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1463330797168" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>


css

.gmap{

width: 80%;
margin: 0 auto;
padding: 30px 0 56.25%;
position: relative;
overflow: hidden;
}

.gmap iframe,
.gmap object,
.gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


なお、スマホなどでGoogleMap上のスクロールを無効にしたい場合はiframeの記述の中にstyle="pointer-events:none;"を追加する。