Guides
How to embed a map
Direct answer
How do you embed an interactive map in a website?
Publish the map on an embed-enabled plan, copy the generated iframe, and place it in a website builder that permits third-party HTML embeds.
No credit card No code Export anytime
Publish & Share
Website embed workflow
1. Publish the map
2. Open the Embed tab
3. Copy the iframe code
Paste the responsive iframe into your website platform's HTML or embed block.
No code
Visual map building
CSV + Sheets
Spreadsheet workflows
Website-ready
Share links and embeds
02
Use the platform's HTML or Embed block
Paste the complete generated iframe into the website builder's custom-code surface. Keep width at 100%, but choose an explicit height and size the parent container as well.
Webflow: Code Embed; Shopify: Custom Liquid in a dedicated page template
Squarespace: HTML Code block with Display Source off; Wix: Embed HTML with separate desktop and mobile sizing
WordPress: Custom HTML block when the user role and security policy allow iframes
Framer: Embed component; GoDaddy Websites + Marketing: HTML section with Forced Height
Notion: use the hosted map as a bookmark or link; an inline Notion embed is not a verified workflow
03
Example iframe and page structure
The generated iframe supplies the real map ID and source. Keep that output intact, then wrap it in a dedicated page section with a visible heading and explanation.
A compact map without a list may work around 600–650px high
A locator with search, filters, and cards commonly needs 750–900px
The parent website block, grid cell, or section must be at least as tall as the iframe
Important answers, location summaries, data sources, and accessibility information should remain in normal page HTML outside the frame
04
Configure access and domain rules
The map's publication state controls whether it can load. MapsMaker Business can also restrict which website domains are permitted to frame it.
Allow the live root domain when using Business allowlisting; that entry already covers its subdomains, including www
Add a staging or builder-preview domain separately because it is a different host
Test the published page with a normal referrer; privacy tooling or previews that omit referrer information can be denied
Public, Unlisted, and Password are hosted-map access modes; confirm password and cookie behavior separately before relying on them inside an iframe
05
Troubleshoot blank, clipped, or mobile embeds
Start with the visible symptom and check the complete chain: map publication, plan, iframe source, host-page permissions, container dimensions, and any domain rule.
Blank or access message: verify the map is published, the plan includes embeds, and the iframe uses the generated /embed/ source
Bottom is missing: increase both iframe and parent-container height and remove unintended overflow clipping
Desktop works but mobile fails: resize the host platform's element or breakpoint layout, not only the iframe code
Domain denied: verify the actual live host and Business allowlist; do not add redundant apex and www entries
Builder removed the iframe: check platform plan, editor permission, theme capability, security plugins, or content-security policy
06
Limits and trade-offs
An iframe preserves the full interactive map without rebuilding it in the website, but it is a separate cross-origin document.
Cross-origin content cannot automatically resize the host page height
The iframe's text is not a substitute for useful crawlable content on the host page
A share link is simpler for email, chat, and Notion; an embed is better when the map must stay inside a website page
A static image is lighter but does not provide search, filters, live records, or interactive directions
Share link, website embed, or static image
Pick the delivery method based on where the map must appear and how much interaction visitors need.
| Method | Best for | Trade-off |
|---|---|---|
| Hosted share link | Email, messages, documents, and a dedicated map destination | Visitors leave the referring page |
| Interactive iframe | Keeping search, filters, records, and directions inside a website | Requires an embed-enabled plan and explicit responsive height |
| Static image | A lightweight visual preview | No live search, filters, or location interaction |
How it works
1
Finish and publish the map
Verify its data and controls, save it, and turn Published on.
2
Confirm embed eligibility
Use Starter, Pro, or Business and review any Business domain allowlist.
3
Copy the iframe
Open Share → Embed and copy the complete generated code, including its /embed/ source.
4
Paste into the host
Use the platform's HTML, custom-code, or Embed block and keep the generated source intact.
5
Set both dimensions
Use width 100%, an explicit iframe height, and a parent element large enough to contain it.
6
Verify the live page
Test signed out on desktop and mobile, including controls, list scrolling, directions, CTAs, and access rules.
Frequently asked questions
Can I iframe the public /m/ share link?
No. The hosted /m/ page is a share destination and blocks third-party framing. Copy Share → Embed and use the paid /embed/ source instead.
What iframe height should I use?
Match the content and host layout. A compact map may fit around 600–650px; a locator with a list and filters often needs 750–900px. Always test the real mobile page.
Does width 100% make every platform responsive?
No. It lets the iframe follow the available width, but Wix and other builders may require separate element sizing, and every iframe still needs an explicit height.
Does a Business root-domain rule include www and other subdomains?
Yes. Allowing the root domain includes its subdomains. A builder staging domain such as webflow.io or framer.app is a separate host and must be evaluated separately.
Does an iframe provide SEO text to the page around it?
Do not rely on it for that job. Add a descriptive heading, summary, useful location or methodology text, and fallback help in the host page's own rendered HTML.
When is a share link better than an embed?
Use a share link for email, messaging, documents, and Notion bookmarks. Use a paid embed when visitors should interact with the map without leaving an eligible website page.
On this page
Build with MapsMaker
Want the quick version?
Start with a template and publish your first map today.