Embed a Google Map on Your Website

Use MicroEdits to place your map anywhere, fast. Paste your Google Maps embed and position it visually—then preview and publish across any CMS.

Backlink: Embed a Google Map on Your Website.

1. Open your place in Google Maps → Share → Embed a map.
2. Copy the iframe URL and paste into an HTML block.
3. Add title, loading="lazy", and keep referrerpolicy="no-referrer-when-downgrade".

Make it responsive with an aspect‑ratio wrapper:

<div class="responsive-map">
  <iframe src="https://www.google.com/maps/embed?pb=YOUR_EMBED_QUERY" loading="lazy" title="Map: Acme HQ" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<style>
.responsive-map{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.responsive-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
</style>

Use when you need multiple markers, custom styles, or events.

1. Create an API key in Google Cloud; enable billing and restrict HTTP referrers.
2. Add a container and init script:

<div id="map" style="width:100%;height:400px"></div>
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"></script>
<script>
function initMap(){
  const center={lat:37.422,lng:-122.084};
  const map=new google.maps.Map(document.getElementById('map'),{center,zoom:15});
  new google.maps.Marker({position:center,map,title:'Acme HQ'});
}
</script>

• Lazy‑load iframes; defer JS API.
• Use an aspect‑ratio wrapper to prevent layout shift.
• Provide a descriptive iframe title and nearby address text for screen readers.
• If consent is required, render a placeholder and load the map after consent.

• Blank iframe: ensure the wrapper provides height.
• Mixed content: use HTTPS URLs.
• JS API “For development purposes only”: enable billing or fix referrer restrictions.
• Enterprise filters: add a nearby "Open in Google Maps" link.