タグ別アーカイブ: スマホ

Googleマップをレスポンシブサイトに対応させる方法。スマホサイトに埋め込む時など

Googleマップをスマホサイトに埋め込むとはみ出す時の対処法

レスポンシブのスマホサイトに Google map を埋め込むと、はみ出してしまう。

これをはみ出さないようにしたい。

gmap-respon

共有から

gmap-respon2

iframeのタグをコピペする。

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23796.650854092717!2d140.75646100404356!3d41.79423516221846!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5f9ef46bcb8d5525%3A0xa9e4bd2d96c4d502!2z54m55Yil5Y-y6Leh5LqU56ic6YOt6Leh!5e0!3m2!1sja!2sjp!4v1460702096429″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

HTMLをちょこっとだけ改造

<div class=”gmap”><iframe…上のコピペソース…/iframe></div>

という感じで、 div でくくってやる。

そして普通にページに貼り付ける。

ちなみに class名の gmap は何でもOK。

 
 

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

 
 

これだけで、勝手にレスポンシブに対応してくれる。

コピペソースに width=”600″ height=”450″ などの記述があるが、レスポンシブ時にはこれは無視されるのでそのままでOK。

こんな記事も読まれています