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

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

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

共有から

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。