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

Open your page in MicroEdits, paste the Google Maps iframe into the target section, preview across templates, and publish. Works with WordPress, Shopify, Wix, Squarespace, Webflow, and more.

See: Embed a Google Map on Your Website.

Block Editor: add a Custom HTML block and paste the Maps iframe. Classic: switch to Text and paste. Set a descriptive title and use a responsive wrapper.

Online Store → Customize → add a Custom Liquid or HTML block. Paste the iframe. If sanitized, add via a section that supports HTML or edit the section schema carefully (duplicate theme first).

Use the platform’s Embed/HTML element. Paste the iframe and adjust width to 100%. Wrap for aspect‑ratio to avoid fixed heights.

Use an Embed element. Paste the iframe and set a wrapper with aspect‑ratio (16/9). Validate on mobile for spacing and tap targets.

• Use an aspect‑ratio wrapper; set width:100%.
• Add an iframe title and place the address text nearby.
• Enable loading="lazy".
• Preview on mobile and confirm theme builders don’t strip embeds.

• WordPress: Confirm theme CSS doesn’t constrain iframe width/height.
• Shopify: If the map doesn’t render, check for Liquid sanitization or section schema limits.
• Wix/Squarespace: Ensure the Embed element is set to 100% width.
• Webflow/Framer: Verify the wrapper defines height via aspect‑ratio.

• Sanitized code: switch to an allowed HTML block or adjust section settings.
• CSP issues: allow https://www.google.com/ frames.
• Theme conflicts: ensure the wrapper defines height.

See our hands‑on embed guide with code and responsiveness: Embed a Google Map on Your Website.