グーグルマップ　レスポンシブ　googlemap

GoogleMapの埋め込む地図をCSSでレスポンシブ対応させ伸縮させる方法

 

http://log-file.net/web/css-2095

 

下記のCSSとHTMLを表示したい箇所に設置して作業完了です。

CSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<style type="text/css">
<!--
.gmap{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.gmap iframe, .gmap object, .gmap embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
<divclass="gmap">
<iframesrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.673685490624!2d139.7292645!3d35.660410500000005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b770913970d%3A0xccc3467fcb15b353!2z44Kw44O844Kw44Or5qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1436626683899"width="600"height="450"frameborder="0"style="border:0"allowfullscreen></iframe>
</div>
※padding-bottom: 56.25%;　でマップの高さを設定している