GoogleMapをレスポンシブサイトに埋め込む方法
GoogleMapをレスポンシブサイトに埋め込む方法に悩んでいましたが、ついに見つけました。
今までは、画像については、Media Queriesを利用して、スマートフォン(iPhone・Android)とPCのスタイルシート(CSS)を振り分ける単純な方法ででサイズ変更に対応していました。
GoogleMapについては、最初のレンダリング時に、勝手に地図が表示幅に収まってくれるので、気にもしていなかったのですが、別のサイトの構築案件で、レスポンシブサイトに対応せざるを得なくて困っていました。
そこで、GoogleMapの地図をレスポンシブサイトに埋め込む方法
コピペOKということなのでソースも書いておきます。
HTML
<div class="ggmap">iframeのコピーしたコード</div>
CSS
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
コメント