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

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

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

共有から

iframeのタグをコピペする。

 

HTMLをちょこっとだけ改造

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

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

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

 
 

CSSに追記

 
 

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

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