GoogleMapをレスポンシブ対応させた時に出た余白の解決方法

Googlemapをレスポンシブ対応でcssを充てている時に、お手本になぞらえてコードを書いたつもりが、

地図の下のほうに大きな余白が空いてしまいました・・・

通常、ググって辿り着いた情報だと以下のようなパターンになっていることが多いです。

<div class="gmap">
 　<iframe .......>
</div>

一応、iframeタグを囲んでいるdivタグには「gmap」というクラス名をつけておきます。

この外側のdivタグをお手本通りにしないと、どうも余白が生まれてくるようです。

私の場合は、幅や高さを設定したかったので、このgmapクラスのcssをいじり、お手本通りでない形にしていました。

【解決策】

さらにもう一つdivタグで囲んであげて、それに自分が指定したい幅や高さを指定してあげると余白がなくなりました。

<div class="gmap__wrapper">
  <div class="gmap">
    <iframe ....>
  </div>
</div>

下記に参考サイトを載せておきます。

誰かのヒントになれば幸いです。

【参考サイト】