Google map iframe set height?

Issue

I just want to embed my google map location. When I use the iframe, it goes 100% height. When I set height

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

It looks like this way.

Map size looks ok but it’s using unwanted white space between footer. This is my iframe

<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;
}

I just want to show only 30% size of map. How can I archive that?

Solution

You are getting white space because you use “padding-bottom: 77.4%;”. Just use height: 30%;.

Answered By – Smokinggunz

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0