Add a Google Map to Your Website (CMS-Specific)

Overview

If you just need to add a Google Map to your website, the fastest, lightest method is a plain iframe. No plugin. No bloat. It works everywhere and can be made responsive with a couple of CSS lines. For a deeper dive into safe embed code and options, see the complete embed guide.

Here’s how to get the embed from Google Maps:

• Open Google Maps, search your place, click Share, then Embed a map.
• Choose the size, copy the HTML.
• Paste it into your site’s HTML-friendly area. If your CMS strips it, use its dedicated embed/HTML component. Google’s help article has the same steps: Embed a map or directions.

A clean, responsive-friendly iframe (you’ll size it in CSS):

<div class="map-wrap">
  <iframe
    src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
    style="border:0;"
    loading="lazy"
    allowfullscreen
    referrerpolicy="no-referrer-when-downgrade"
    title="Our location on Google Maps"
  ></iframe>
</div>

If you need advanced interactivity (multiple markers, programmatic control), that’s a different tool entirely—the Google Maps JavaScript API. Start here: Maps JS API overview. For most sites, though, a simple embed does the job and loads faster. You can also explore variations like showing directions or a specific view in Show Google Maps on a website.

Quick pointers on where to paste embeds:

Add a map across any CMS instantly with MicroEdits

MicroEdits adds a Google Map to any existing website by describing the change in plain English. Open the page, tell it where the map should appear (for example, under your address on the Contact page), and preview the result. You can share that preview for sign‑off and apply it to one page or across similar pages. No plugins, no theme hunting, no code wrestle—just ask and it happens.

• Works on WordPress, Shopify, Wix, Squarespace, Webflow, Framer—anything.
• Changes appear instantly and can be reverted just as quickly.
• You can preview and share before publishing.

WordPress (Block Editor & Classic)

WordPress makes this straightforward when you use its HTML‑friendly tools.

• Block Editor (Gutenberg):

  1. Add a Custom HTML block where you want the map.
  2. Paste the Google Maps iframe.
  3. Optional: Wrap in a Group block to control spacing; set width to Wide/Full if your theme supports it.
  4. Keep the title attribute on the iframe and use loading=“lazy” for speed.

• Classic Editor:

  1. Switch from Visual to Text mode.
  2. Paste the iframe.
  3. Don’t toggle back to Visual if it tends to rewrite the code.

• Page builders (Elementor, Divi, etc.): Use their HTML/Code widget. If the regular editor strips iframes, this usually doesn’t.

• Template Parts (Block Themes): If the map belongs in a reusable spot (e.g., Contact page template), place it in the relevant Template Part to reuse it consistently.

Helpful reference: WordPress Custom HTML block.

Quick QA for WordPress:

• Preview on mobile and ensure the map spans the container width.
• Check the map title reads clearly to screen readers.
• Verify the address link opens correctly in a new tab from the larger Google Maps view.

Shopify

Use the Theme Editor so your iframe isn’t sanitized.

• Theme Editor (Online Store 2.0):

  1. Online Store → Themes → Customize.
  2. Open the template for your page (e.g., contact, page, or a custom template).
  3. Add a Custom Liquid section.
  4. Paste the map iframe markup inside the section.

• Avoid pasting iframes in rich text fields (like product descriptions)—they’re often stripped for safety. Drop the map into sections/blocks or, if needed, a theme section.

Shopify reference: Sections and blocks.

Quick QA for Shopify:

• Test the template on a product/page using it; verify it loads on all pages of that type.
• Confirm the map is responsive in Dawn or your theme of choice.
• Check the contact page still passes Core Web Vitals after adding the map.

Wix & Squarespace

Both platforms offer a dedicated embed block.

• Wix:

  1. In the Wix Editor, Add → Embed → Custom Embeds → Embed a Widget (or HTML iframe).
  2. Paste the Google Maps iframe.
  3. Stretch to full width and set min height for smaller screens if needed.

• Squarespace (7.1):

  1. Add an Embed block where the map should appear.
  2. Paste the iframe; adjust block spacing to avoid cramped layouts.
  3. You may need a plan that supports custom code embeds.

Quick QA for Wix/Squarespace:

• Confirm the map scales within your section’s max width.
• Reduce default block padding for a cleaner look.
• Add a text address and a View larger map link nearby for accessibility.

Webflow & Framer

Use their native Embed components to keep control over layout and responsiveness.

• Webflow:

  1. Add an Embed element.
  2. Paste the iframe, set width to 100%, and define an aspect ratio (e.g., 3:2 or 16:9).
  3. Style a wrapper for consistent spacing across breakpoints.

  Reference: Webflow University: Embed.

• Framer:

  1. Insert an Embed component.
  2. Paste the iframe and set Resizing to fill the container.
  3. Apply a min height for mobile to avoid a cramped map.

Quick QA for Webflow/Framer:

• Verify aspect ratio holds from mobile to desktop.
• Confirm the iframe has a meaningful title.
• Test lazy loading behavior on real devices.

Responsive, accessibility, and QA

A simple aspect‑ratio rule keeps maps fluid:

.map-wrap {
  position: relative;
  padding-top: 56.25%;
} /* 16:9 */
.map-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Or use the modern property directly:

iframe.map {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

Accessibility and performance checklist:

• Add a descriptive iframe title, e.g., Our San Francisco office on Google Maps.
• Use loading=“lazy”.
• Provide the address in plain text and a nearby View larger map link.
• If your region requires consent for third‑party embeds, show a simple consent prompt or a click‑to‑load placeholder before loading the map.
• When you need different sizes across pages, see variations in ways to embed a map cleanly.

Troubleshooting

• Embed gets stripped:

  • Use the platform’s dedicated Embed/HTML/Custom Liquid component—rich text fields often sanitize iframes.
  • In WordPress Classic, paste in the Text tab. In block editor, use Custom HTML.

• Theme CSS collapses the iframe:

  • Ensure the wrapper style sets height via aspect ratio. Add a min-height if your theme sets iframes to height: 0.

• Content Security Policy (CSP) blocks the map:

  • Allow Google Maps domains in frame-src. Example header (adjust to your setup):

Content-Security-Policy: frame-src https://www.google.com https://maps.google.com;

• Mixed content:

  • Always use the https embed URL from Google.

• Map feels heavy on slow connections:

  • Consider a static screenshot that links to the map for non-critical pages, or keep the iframe only on the Contact page.

If you’d rather skip all this and just have it done, MicroEdits can place the map exactly where you want, on any site, and keep it easy to update later.