Platforms

Embed a map in Webflow

Direct answer

How does this MapsMaker embed workflow work?

Need a clean, interactive map on a Webflow page? Create the map in MapsMaker, copy the embed code, and drop it into a Webflow Embed block.

Create an embeddable map See pricing

No credit card No code Export anytime

Illustrative MapsMaker map output; this is not a webflow 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 its hosted share page first.

Copy the paid embed

Open Share → Embed and copy the complete iframe code. Embedding requires Starter or higher.

Add Webflow Code Embed

In Designer, add a Code Embed element to the intended page section or Collection Template.

Set the layout

Paste the iframe, keep width at 100%, and give the iframe and its wrapper an explicit height.

Publish and verify

Publish Webflow, then test the live desktop and mobile URLs, including search, filters, list scrolling, and directions.

What you need before you start

Webflow needs permission to render custom embed code, and MapsMaker only serves website embeds for published maps on an embed-enabled plan.

A published MapsMaker map on Starter, Pro, or Business, verified first through its hosted share page

A Webflow Site or Workspace plan that exposes the Code Embed element

Designer access to the page or Collection Template where the map will appear

A planned map height; 700–750px is a practical starting point when a locator also shows filters and a list

Use a Code Embed, not an image placeholder

In MapsMaker, publish the map and open Share → Embed. In Webflow Designer, add a Code Embed element to the intended section and paste the complete iframe snippet.

Keep the iframe width at 100% and set an explicit pixel or viewport-based height

Make sure parent grid, flex, and wrapper elements do not clip the iframe with a shorter height or hidden overflow

Preview the layout, then publish the Webflow page and verify the live URL; Designer rendering alone is not the acceptance test

Add a short visible description above the map so the Webflow page remains useful to search engines and users who cannot use the iframe

Example: a CMS-backed location directory

A retail directory can place one MapsMaker locator in a dedicated Locations page: a two-sentence introduction, a 750px-high embed, and contact/help text below it. Location records remain in MapsMaker, so saved map changes do not require replacing the iframe code.

Use a Collection Template only when every collection item should display the same map

Do not promise a different map per CMS item unless you have tested a dynamic embed-field implementation

Keep category explanations, service details, and important location text in Webflow HTML rather than only inside the iframe

Troubleshoot a blank or clipped Webflow map

A missing map is usually caused by plan access, unpublished content, container sizing, or a domain rule rather than the iframe syntax itself.

Blank in Designer but visible after publish: use Webflow Preview and the live page as the final check

Bottom of the list is cut off: increase both the iframe height and its parent section or grid-cell height

Embed access message: confirm the map is published and the MapsMaker workspace is on an embed-enabled plan

Domain denied: on MapsMaker Business, allow the live root domain; its subdomains are included, but a separate webflow.io staging domain must be allowed separately if you test there

Limits and official Webflow guidance

An iframe can resize with the width of its container, but it cannot automatically tell Webflow how tall its cross-origin content has become. Webflow also does not troubleshoot third-party custom code.

Review Webflow's official Help Center article named "Custom code embed" before publishing because plan access and preview behavior can change

Treat the iframe as the interactive layer, not as a replacement for an accessible page heading, explanation, and support information

Test keyboard access, map controls, list scrolling, and mobile height on the published page

Frequently asked questions

Which MapsMaker plan supports a Webflow embed?

Website embeds require Starter, Pro, or Business. A Free map can be shared by its hosted link but is not served through the website embed route.

Can I put the map in a Webflow CMS template?

Yes when every item should show the same map. A different map per CMS item needs a deliberately tested dynamic-field implementation; this page does not assume that setup.

Is the Webflow embed automatically responsive?

Its width can follow a responsive container when set to 100%, but the iframe still needs an explicit height at each important breakpoint.

Why does the map work on my custom domain but not webflow.io?

A Business domain allowlist treats the custom root domain and the webflow.io staging domain as different hosts. Allow the staging host separately when it is part of your test workflow.

Do saved map changes require republishing Webflow?

Normally no. Save the map changes in MapsMaker and the existing iframe loads the current published map data. Republish Webflow only when you change the page or iframe markup itself.

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.