Embedding Google Maps

Google Maps provides iframe embed code via the Share dialog. Paste the iframe directly into your HTML to display an interactive map.

Make the map responsive by wrapping it in an aspect-ratio container.

Example

<!-- Wrapper for responsive map -->
<div style="position: relative; width: 100%; aspect-ratio: 16/9;">
  <iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="100%"
    height="100%"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    title="Location map"
  ></iframe>
</div>

HTML

Full Editor

Pro Tip

Use aspect-ratio: 16/9 on the wrapper instead of the old padding-bottom hack for responsive iframes.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned