Platforms

Embed an interactive map in Squarespace

Direct answer

How does this MapsMaker embed workflow work?

Squarespace makes embeds easy. Build your map in MapsMaker, then paste the iframe into a Code block.

Create a Squarespace map See pricing

No credit card No code Export anytime

Illustrative MapsMaker map output; this is not a squarespace editor screenshot.

No code

Visual map building

CSV + Sheets

Spreadsheet workflows

Website-ready

Share links and embeds

How it works

Publish the map

Save the map in MapsMaker, turn Published on, and verify the hosted version.

Copy the iframe

Open Share → Embed and copy the complete iframe; website embeds require Starter or higher.

Add a Code block

In Squarespace, add a Code block, select HTML, disable Display Source, and paste the iframe.

Size the section

Use width 100%, set an explicit iframe height, and give the Fluid Engine block enough room.

Verify the live page

Save and publish, then test the signed-out desktop and mobile experience, including controls and links.

Check plan and map requirements

The basic workflow uses a Squarespace Code block, but iframe support depends on the current Squarespace plan and the block's code settings.

A published MapsMaker map on an embed-enabled Starter, Pro, or Business plan

A Squarespace plan that permits iframe HTML in Code blocks

Page-editing access and a section with enough horizontal and vertical space

A live custom domain ready for final testing; logged-in editor previews can behave differently

Paste the iframe into a Code block

Publish the map in MapsMaker, copy Share → Embed, and add a Code block where the map should appear. Select HTML, keep Display Source disabled, and paste the complete iframe.

Use width 100% and an explicit height; 650–800px is a useful starting range for a map with controls or a list

Give the Code block a full-width row in Fluid Engine when the map is the main page element

Save, preview, and inspect the published page rather than relying only on the logged-in editor

Place a concise visible explanation before the map and contact or accessibility information after it

Example: a neighborhood guide

A city-guide page can introduce its selection method in Squarespace text, present a full-width 700px map grouped by food, culture, and parks, then list the source and last review date below the embed.

Use groups for the main categories and tags for attributes such as free, family-friendly, or wheelchair access

Keep inclusion rules and editorial recommendations in Squarespace HTML so they remain readable without the map

Verify every CTA and directions link on a phone before publishing the guide

Troubleshoot Code block and layout failures

Most Squarespace failures come from plan restrictions, preview mode, Code block settings, dimensions, or a Business domain allowlist.

Iframe appears as source text: select HTML and make sure Display Source is off

Embed is missing while logged in: use Squarespace Safe Mode or inspect the published page in a signed-out window

Map is cramped: increase both the iframe height and the Fluid Engine block or section height

Domain denied: allow the live root domain in MapsMaker Business; the root covers its subdomains, while a separate Squarespace staging host must be treated separately

Limits and official Squarespace guidance

Squarespace cannot automatically derive a cross-origin iframe's ideal height, and its support team does not guarantee help with third-party custom code.

Review Squarespace's official Help Center article named "Code blocks" for current plan eligibility, Safe Mode behavior, and Index-page limitations

Re-test the embed after changing templates, section layouts, or Ajax/Index-page settings

Do not treat the iframe as the only SEO or accessibility content on the page

Frequently asked questions

Does every Squarespace plan allow an iframe in a Code block?

No. Iframe and JavaScript support is plan-dependent. Check Squarespace's current Code blocks documentation before choosing this workflow.

Why do I see code instead of the map?

The block is likely displaying source. Set the Code block to HTML, turn Display Source off, save, and check the published page.

Why is the map missing in the editor but visible to visitors?

Logged-in preview protections can suppress custom code. Use Safe Mode where appropriate and verify the live page in a signed-out browser.

Can I update locations without editing Squarespace?

Yes. Save the updated published map in MapsMaker; the existing iframe continues to load it without replacing the Squarespace block.

How should I make the map usable on mobile?

Set width to 100%, choose a deliberate height, give the Fluid Engine block enough space, and test search, filters, cards, and map controls on the published mobile page.

Build with MapsMaker

Create your map in minutes

Start with a template, import locations if you have a spreadsheet, and publish a link or embed.