Embed a Google Map on Your Website

If you need to embed a Google Map on your website, you have two solid paths: the fast, copy‑paste iframe, or the customizable JavaScript API. The right choice depends on how much interactivity you need. This guide walks you through both—and shows a quicker, no‑code path using MicroEdits. If you want a broader overview, see our companion article on how to add a Google Map to a website.

Overview

A simple way to insert a Google Map on your website is the built‑in embed. It’s free, doesn’t require an API key, and takes minutes. When you need custom styling, multiple markers, or tighter control, the JS API earns its keep.

Tip: If you prefer an open solution, you can also embed OpenStreetMap.

Add a Google Map to your site instantly with MicroEdits

The quickest way to embed Google Maps without touching code is MicroEdits. You tell it what you want in plain English—Place our office map under the contact form and make it responsive—and it does the rest on your live site. No plugins. No theme spelunking. No copy‑paste rabbit holes.

How it works:

• Grab the embed from Google Maps (Share → Embed a map).
• Describe where it goes in MicroEdits (e.g., Add the map below the address on the Contact page).
• Preview the change, share it with your team, then apply it instantly. You can revert anytime.

Why people like it:

• No coding required
• Works on any website (WordPress, Shopify, Wix, Squarespace, Webflow—anything)
• Instant results you can preview and share before publishing

If you’d rather go hands‑on, the next sections show the manual methods.

Method 1: Embed via iframe

The iframe is the fastest way to embed Google Maps on a website.

1. Get the embed code

• Open your location in Google Maps.
• Click Share → Embed a map.
• Choose a size (you’ll make it responsive shortly) and copy the HTML.

2. Paste into your page

• Insert it where you want the map to appear (HTML block, code widget, etc.). Add a meaningful title for accessibility and enable lazy loading.

<!-- Replace src with the URL Google provides -->
<div class="map-embed">
  <iframe
    src="https://www.google.com/maps/embed?pb=YOUR_EMBED_QUERY"
    width="600"
    height="450"
    style="border:0"
    allowfullscreen
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    title="Map: Acme HQ, 123 Main St, Springfield"
  >
  </iframe>
</div>

3. Verify

• Open the page. If the map appears but looks fixed‑width, continue to the next section to make it responsive.

Reference: Google’s embed steps are documented here: Embed a map.

Make the iframe responsive

A responsive Google Map should scale to the container width while keeping its aspect ratio.

Option A: modern CSS (aspect-ratio)

.map-embed {
  max-width: 100%;
}

.map-embed iframe {
  width: 100%;
  height: auto; /* height will be controlled by the wrapper below when needed */
}

.responsive-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* or 4/3 for a taller map */
  overflow: hidden;
}

.responsive-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

<div class="responsive-map">
  <iframe
    src="https://www.google.com/maps/embed?pb=YOUR_EMBED_QUERY"
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade"
    title="Map: Acme HQ, 123 Main St, Springfield"
  ></iframe>
</div>

Option B: older-browser fallback (padding-top)

.map-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 aspect */
  overflow: hidden;
}

.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

This keeps your responsive Google Map clean without hardcoding pixel sizes. MDN references: iframe, aspect-ratio.

Method 2: Use the JavaScript API when you need interactivity

Use the JS API when you need multiple markers, custom styles, events, or programmatic control.

Setup essentials:

• Create an API key in Google Cloud and enable billing.
• Enable APIs: at minimum, Maps JavaScript API.
• Restrict the key to your site’s HTTP referrers for security.

Good starting points: Maps JavaScript API overview, API key best practices.

Minimal markup and script:

<!-- Add a container where the map will render -->
<div id="map" style="width:100%;height:400px;"></div>

// Called after the Maps JavaScript API loads
function initMap() {
  const center = { lat: 37.422, lng: -122.084 }; // Example: Googleplex

  const map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 15,
    mapId: "DEMO_MAP_ID", // optional if you use Styled Maps
  });

  new google.maps.Marker({
    position: center,
    map,
    title: "Acme HQ",
  });
}

Notes:

• Load the Maps JavaScript API with your key and set a callback to initMap. Use defer when you include it so it doesn’t block rendering.
• For a single, static location, the iframe embed is simpler and faster. Use the JS API only when its power is needed.
• For a practical walkthrough, see how to show Google Maps on a website.

CMS notes

Where to paste code in popular platforms:

• WordPress
  • Block Editor: add a Custom HTML block and paste the iframe.
  • Classic Editor: switch to Text and paste the iframe.
  • Docs: Custom HTML block
• Shopify
  • Online Store → Customize → add a Custom Liquid section or an HTML block in the desired section, then paste the iframe.
  • Docs: Sections and blocks
• Wix
  • Add elements → Embed Code → HTML iframe, paste the embed code.
  • Docs: Embed custom code
• Squarespace
  • Use a Code block and paste the iframe. Some plans limit third‑party embeds.
  • Docs: Using Code Blocks
• Webflow
  • Use the Embed element and paste the iframe.
  • Docs: Embed element

Performance and accessibility

Make the embed fast and considerate:

• Lazy-load: add loading=“lazy” on the iframe to defer off‑screen loads. MDN: native lazy loading.
• Responsive: wrap with an aspect‑ratio container to avoid layout shifts.
• Describe it: set a clear iframe title and place the address text nearby for screen readers and copy‑paste.
• Consent UX: if your site requires consent, show a static placeholder with a Load map button, then inject the iframe after consent.
• JS API hygiene: load the script with defer, initialize on demand (e.g., when the map scrolls into view), and only include APIs you use.
• Referrer policy: keep referrerpolicy=“no-referrer-when-downgrade” on the iframe for sane defaults.

Troubleshooting

• Blank or gray map
  • Check that the iframe has height. A missing or overridden height often collapses it. The responsive wrapper avoids this.
  • Try the embed URL directly in a new tab. If it fails there, re‑copy from Maps.
• Mixed content warnings
  • Your site is HTTPS but the iframe URL is HTTP. Use the HTTPS embed URL from Google Maps.
• For development purposes only watermark
  • You’re using the JS API without billing enabled or not on an allowed referrer. Confirm billing and referrer restrictions in Google Cloud.
• This page can’t load Google Maps correctly
  • Usually a JS API key/config issue. Verify the right API is enabled and the key is scoped to your domain.
• Content blocked by policies
  • Some corporate networks or aggressive browser extensions block embeds. Provide a nearby Open in Google Maps link as a fallback.
• Console errors
  • Open DevTools → Console for precise messages (e.g., key restriction, missing library). The message usually points to the fix.

If you want to skip the tweaks—height, responsiveness, titles—MicroEdits can apply those adjustments for you in one pass.