Embed Google Map

2022-Jul-18

Embed a map or directions

Open Google Maps.
Go to the directions, map, or Street View image you'd like to embed.
In the top left, click Menu or ≡.
Click Share or embed map.
Click Embed map.
To the left of the text box, pick the size you want by clicking the Down arrow.
Copy the text in the box.
Paste in your web page.

To have the map have responsive style:
Can change padding-bottom (line #4) from 75% to something else for a different aspect ratio.

How to Embed Google Maps in your Website Responsively and Lazily 2022-Feb-01

/* the css */
.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;
}

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