Googleマップiframeの高さを設定しますか？

Question

私はちょうど私のGoogleマップの場所を埋め込みたい。 iframeを使用すると、100％の高さになります。高さを設定すると

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

このように見えます。

地図のサイズは大丈夫ですが、フッターの間に不要な空白を使用しています。これは私のifrmaeです

<div class="google-maps"> 
<iframe src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-69Hn5JZ4joRzaymM3Zi2o8&key=AIzaSyDTljbjBpIX73t57vhNIhMKyk0u5p6MNGI" width="600" height="200" frameborder="0" style="border:0"> 
</iframe> 
</div> 

.google-maps { 
    position: relative; 
    padding-bottom: 77.4%; 
    height: 0; 
    overflow: hidden; 
} 

マップの30％サイズだけを表示したいだけです。アーカイブはどうすればできますか？

Answer 1

"padding-bottom：77.4％;"を使用しているため、空白が表示されています。ちょうど高さを使用してください：30％;.