title: Google map iframe set height?
body: <p>I just want to embed my google map location. When I use the iframe, it goes 100% height. When I set height</p>
  <pre><code>.google-maps iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 30% !important;
  }
  </code></pre>
  <p>It looks like this way. <a href="https://i.stack.imgur.com/hmhuK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hmhuK.png" alt="enter image description here" /></a></p>
  <p>Map size looks ok but it's using unwanted white space between footer. This is my iframe</p>
  <pre><code>&lt;div class=&quot;google-maps&quot;&gt;
  &lt;iframe src=&quot;https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-69Hn5JZ4joRzaymM3Zi2o8&amp;key=AIzaSyDTljbjBpIX73t57vhNIhMKyk0u5p6MNGI&quot; width=&quot;600&quot; height=&quot;200&quot; frameborder=&quot;0&quot; style=&quot;border:0&quot;&gt;
  &lt;/iframe&gt;
  &lt;/div&gt;
  
  .google-maps {
      position: relative;
      padding-bottom: 77.4%;
      height: 0;
      overflow: hidden;
  }
  </code></pre>
  <p>I just want to show only 30% size of map. How can I archive that?</p>