Posted at

Ruby on Rails: Google Mapをレスポンシブに対応する


実現したいこと

Wepアプリ開発していると、Google mapを使う時があるかと思います。

そんな時に、ただただマップコードを埋め込むとせっかくのレスポンシブデザインを意識したサイトが崩れてしまいます。

なので、今回はレスポンシブデザインに対応させる方法を共有したいと思う。


解決方法

<iframe><div class="gmap">でカッコって上げることで解決できる。

<div class="gmap"><%== @user.map %></div>

.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%;