Platforms

Embed a map in Framer

Direct answer

How does this MapsMaker embed workflow work?

Add the MapsMaker iframe to Framer's Embed component, set Fill width and an explicit height at each breakpoint, then verify the published page.

Create a Framer map See pricing

No credit card No code Export anytime

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

No code

Visual map building

CSV + Sheets

Spreadsheet workflows

Website-ready

Share links and embeds

How it works

Publish the map

Save and publish the MapsMaker map, then verify its hosted state.

Copy the website embed

Open Share → Embed and copy the iframe from an embed-enabled plan.

Insert Framer Embed

Add an Embed component and paste the full iframe or its `/embed/` source using Framer's supported mode.

Set constraints

Use Fill width, an explicit height, and parent containers that do not clip the frame.

Publish and verify

Test the live desktop, tablet, and phone breakpoints, including all map controls and outbound actions.

Requirements for a Framer map embed

Framer can accept a URL or iframe in its Embed component. Use the MapsMaker website-embed URL or generated iframe, not the public `/m/` share page.

A published MapsMaker map and Starter, Pro, or Business embed access

Framer project editing access and an Embed component on the intended page

A width constraint set to Fill and an explicit height for each important breakpoint

The live Framer or custom domain available for browser verification

Configure the Embed component

Publish the map, copy Share → Embed, insert Framer's Embed component, and paste the iframe. Set the component to Fill horizontally and choose a fixed height that leaves room for the chosen controls.

Use the generated `/embed/` source rather than trying to frame the hosted `/m/` share page

Check parent Stack, Grid, and component overflow settings

Adjust height at desktop, tablet, and phone breakpoints instead of assuming one value fits every layout

Publish and test the live page because third-party frame restrictions may not be obvious in the canvas

Example: a design-led neighborhood directory

A neighborhood directory can introduce its curation criteria in Framer, place a Fill-width 720px map below the introduction, and add an accessible category summary after the embed.

Group locations by the primary directory categories and reserve tags for amenities or audience needs

Keep the page's core recommendations and source notes in Framer text rather than only in popup records

Test list scrolling and filters at every Framer breakpoint used by the site

Troubleshoot Framer preview and overflow issues

A blank live frame usually indicates an invalid source, unpublished map, plan gate, frame restriction, or Business domain rule. A partial map is usually a sizing problem.

Works in canvas but not live: inspect the published URL and confirm the embedded source permits framing

Map is clipped: increase the Embed component height and remove unintended overflow clipping from parent components

Domain denied: allow the live root domain on Business and add a separate framer.app preview host only when it is part of the tested workflow

CMS page shows the wrong map: do not claim per-record Framer CMS embeds until a dynamic source binding has been implemented and verified

Limits and official Framer guidance

The Embed component can fill available width, but a cross-origin iframe cannot automatically resize its height to match a changing list or filter panel.

Review Framer's official Help Center article named "How to add an iframe or embed script" for the current URL-versus-script workflow

External sites can block framing through response headers; test the real published source

Keep essential directory content outside the frame for accessibility and search visibility

Frequently asked questions

Should I paste the public share URL or the website embed?

Use the paid `/embed/` source or complete generated iframe in Framer. The hosted `/m/` page is intended as a share link and does not permit third-party framing.

Does a Fill-width Framer embed resize its height automatically?

No. Fill handles the component width; choose and test an explicit height at each important breakpoint.

Can I place one map in a Framer CMS template?

A fixed map can be placed in a shared template. Do not assume each CMS item can bind a different embed source until that dynamic setup has been tested.

Why does the frame work in the canvas but not after publishing?

Check the live source URL, map publication and plan, framing headers, and any Business domain allowlist. The published page is the authoritative test.

Do filters work inside the Framer iframe?

The MapsMaker embed can expose configured map filters, but the hosted-page URL-sharing behavior for filter state does not apply inside an embed.

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.