Google map iframe set height?


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. enter image description here

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

<div class="google-maps">
<iframe src="" width="600" height="200" frameborder="0" style="border:0">

.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?


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

Leave a Reply

(*) Required, Your email will not be published