How to add Google map on website using HTML

A map on your website lets customers find your place easily. Here is how simple that is. No API key needed.

Get the embed code

1. Open Google Maps.
2. Search for your address or business and select it from the results.
3. In the panel on the left, click Share.
4. Switch to the Embed a map tab, choose a size (Small, Medium, Large or Custom), and click Copy HTML.

Paste it into your page

The code is a single <iframe>. Paste it inside the <body> of your page, where you want the map to appear. Not sure where that is? Right-click the spot on your page in Chrome or Firefox and choose Inspect to see the surrounding HTML.

<iframe
  src="https://www.google.com/maps/embed?pb=..."
  title="Map showing our shop"
  width="600" height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

• loading="lazy" waits to load the map until the reader scrolls near it. Google's code includes it now; keep it, because the map is heavy.
• Add a title. Screen readers announce it so people know what the frame contains. Google's code doesn't include one.

Make it fit any screen

The copied code has a fixed width, which overflows on phones. Wrap it and let CSS size it:

<div class="map">
  <iframe src="https://www.google.com/maps/embed?pb=..." title="Map showing our shop"
          style="border:0;" allowfullscreen loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

.map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
}

Also write your address as plain text next to the map. It is readable without loading the map, and people can copy it.