Embed Google Maps responsively

This is the default embed code generated by Google Maps:

<iframe
  src="https://www.google.com/maps/embed"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
></iframe>

The embedded map above is non-responsive. What it means is if you open the page on a device other than your desktop computer, the Google Map won’t fit the screen and you’ll have to scroll the page horizontally to see the complete map.

Here’s the code that contains the same Google Map but now the map has been embedded responsively.

If you resize the browser or view the page on a mobile phone, the embedded map would adjust its size automatically based on the size of the device where that map is being viewed.

The new embed code with responsive style will be something like this. You may change the value of padding-bottom (line #4) from 75% to something else for a different aspect ratio.

The responsive code:

<style>
  .google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

<div class="google-maps">
  <iframe
    src="https://www.google.com/maps/embed"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
  ></iframe>
</div>