google MAP の埋め込みで、余白部分が消えない

Question

ご教授ください。

google map APIを利用して地図を表示したいです。
縦横比率は９：１６
地図のレイアウトは水平方向に中央です。

paddlingにサイズ調整後の余白？みたいなものが表示されます。
この部分を非表示にできますか？
地図のみの表示にしたいのですが。。

<div class="map">
     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.7227667113766!2d139.7516262148733!3d35.683827737437696!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188c0b185b3b75%3A0x3282e79fbc91959c!2z44CSMTAwLTAwMDEg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65Y2D5Luj55Sw77yR4oiS77yR!5e0!3m2!1sja!2sjp!4v1521430248304" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
   </div>

.map{
  width: 50%;
  margin: 0 auto;
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  text-align: center;
}

.maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

Answer 1

余計な余白については、.mapにheight: 0;を追加して下さい。
それ以外のサイズ調整はまた別の問題なので考えてみて下さい。

Comments

[yumi55]

有難うございます。height0をかけてみました。
少し余白が縮まりました。有難うございます。

[yumi55]

ですがまだ余白があります。もう少し考えてみます。