---
title: "How to embed a map in another website"
description: "Show a live MangoMap map inside another website. Wrap the map's public or private link in an iframe and paste it into the page. Map access settings still apply."
sidebar:
  label: "Embed in another website"
search:
  keywords: [iframe, embed code, website, wordpress, squarespace]
  boost: 2
---

Embed a map to show it, live, inside another website. Visitors can pan, zoom, and open popups without leaving the host page. You can embed any map link: wrap the link in an `<iframe>` and paste it into the page. The embed shows the map to the same people as the link does, so visitors who are not signed in to MangoMap see it only if the map is published to the web.

## Before you start

- You need to be able to add HTML to the host page. Most website builders have a custom HTML or embed block.
- Check who can see the map. The embed follows the map's access:
  - **`Public`:** anyone.
  - **`Link-only`:** anyone with the private link. Inside an iframe, the link is visible in the page source.
  - **`Password`:** visitors who know the password. They type it inside the embed.
  - **`Allow public access` off:** signed-in team members only. Each visitor signs in to MangoMap inside the embed.
- Changing the map's access is optional. Do it only if the embed needs a different audience, and only if you have permission to change the map's access. See [How map access works in MangoMap](/docs/map-access/concepts-map-access).

## Copy the map's link

Use the link people already use to open the map. If you do not have it, open the map and copy its address from the browser's address bar.

If you can change the map's access, you can also copy the link from the map's settings. Open the map, click `Configuration` in the sidebar, open `Access`, and go to `Publish to web`:

- `Public` or `Password`: copy the `Public link`.
- `Link-only`: copy the `Private link`.

To embed the map for visitors outside your team when `Allow public access` is off, turn it on first and choose a publishing mode. See [How to publish a map to the web](/docs/map-access/publish-map-to-web).

<img src="/_assets/map-access/embed-a-map--publish-to-web.png" alt="Publish to web in the Access section of Map settings, with Allow public access on, Publishing mode set to Public, the Public link field and its copy button, and the Show in public portal and Allow search engine indexing switches" width="1600" height="960" />

## Choose where the map opens

The embedded map opens at the map's `Initial view`: either fitted to its data, or at a saved position and zoom. Every embed and every visitor gets the same starting view. To change it, see [How to set the initial map view](/docs/map-settings/set-initial-map-view).

Inside an embed, the MangoMap app sidebar is hidden, so the map fills the frame. An embed is usually small, so keep the map in view when it opens:

- Set no tool to open on load. On the map's `Extensions` page, click the filled `Opens on load` chip to clear it. Otherwise a panel such as the legend covers part of the map. See [How the Extensions page works in MangoMap](/docs/map-extensions/concepts-map-extensions).
- Hide the title block if the host page already names the map. See [How to show or hide the title block on the map](/docs/map-settings/show-the-map-title-block).

## Build the embed code

Put the link in the `src` of an `<iframe>`:

```html
<iframe
  src="https://mangomap.com/your-account/maps/your-map-link"
  title="Map of bus routes"
  width="100%"
  height="700"
  style="border: 0"
  allow="geolocation"
  loading="lazy"
></iframe>
```

- Replace the `src` value with the link you copied.
- Replace the `title` with a short description of the map. Screen readers read it out.
- Keep `width="100%"` so the map fills the width of your page's column, and set the `height` in pixels. See [Make the map large](#make-the-map-large).
- Keep `allow="geolocation"` if the map has the geolocation tool. Without it, browsers block the tool inside the frame.

### Make the map large

Give the map as much space as your page allows. A map is read by looking at it, and viewers use its legend, tools, sidebar, and popups to find answers. In a small frame these panels cover most of the map, popups are cut off, and viewers must pan and zoom much more to find what they need.

- Use the full width of the page's column: `width="100%"`.
- Make it at least 600 pixels high. Use 700 to 800 pixels for a map with a legend, a sidebar, or long popups.
- On a page with little room, such as a narrow sidebar, show a link or a button that opens the map in a full browser tab, instead of a small frame.

## Paste it into your website

Paste the code into the HTML of the page where the map should appear.

| Platform | Where to paste |
| --- | --- |
| WordPress (block editor) | A `Custom HTML` block |
| Squarespace | A `Code` block |
| Webflow | An `Embed` element |
| Notion | An `/embed` block. Paste the map's link, not the iframe code. |
| Plain HTML | Anywhere inside the page's `<body>` |

> [!WARNING]
> Some website builders remove HTML they do not trust. If the map does not show, view the source of the published page and check that the `<iframe>` and its `src` are still there.

## Check the embed

Open the published page in a private browser window, so you see it as a visitor who is not signed in. The map loads in the frame, and you can pan, zoom, and open popups. This live example embeds a public map:

<iframe
src="https://mangomap-staging.com/examples-staging/maps/x96jynsj/access-gallery-public"

title="Access Gallery map of country points"

loading="lazy"

style={{ width: "100%", height: "700px", border: 0 }}

/>

A public map embedded with an iframe, with no tool open on load

Visitors who have not yet chosen MangoMap cookie settings see its cookie banner inside the frame first.

Follow the map's access settings to see what a visitor who is not signed in gets in the frame.

{/* diagram:embed-access-flow */}
<svg class="dark:hidden" style="width: 100%; height: auto" viewBox="0 0 640 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="embed-access-flow-inline-title embed-access-flow-inline-desc">
  <title id="embed-access-flow-inline-title">What an embed shows</title>
  <desc id="embed-access-flow-inline-desc">Flowchart for a visitor who is not signed in: if Allow public access is off, the frame shows a sign-in panel; if it is on, a Public map shows to anyone, a Link-only map shows when the embed uses the private link, and a Password map shows a password form in the frame first.</desc>
  <defs>
    <marker id="embed-access-flow-inline-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#525252"/></marker>
    <marker id="embed-access-flow-inline-arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#c4360c"/></marker>
  </defs>
  <rect width="100%" height="100%" fill="#f5f5f5"/>
  <path d="M320 68 L320 94" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <path d="M424 148 L470 148" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <path d="M320 200 L320 242" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <path d="M216 296 L122 296 Q114 296 114 304 L114 410" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <path d="M320 348 L320 410" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <path d="M424 296 L518 296 Q526 296 526 304 L526 410" fill="none" stroke="#525252" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-arrow)"/>
  <rect x="434" y="124" width="26" height="16" rx="2" fill="#f5f5f5"/><text x="447" y="136" fill="#525252" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">NO</text>
  <rect x="328" y="213" width="34" height="16" rx="2" fill="#f5f5f5"/><text x="345" y="225" fill="#525252" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">YES</text>
  <rect x="137" y="272" width="56" height="16" rx="2" fill="#f5f5f5"/><text x="165" y="284" fill="#525252" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">PUBLIC</text>
  <rect x="328" y="371" width="74" height="16" rx="2" fill="#f5f5f5"/><text x="365" y="383" fill="#525252" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">LINK-ONLY</text>
  <rect x="439" y="272" width="72" height="16" rx="2" fill="#f5f5f5"/><text x="475" y="284" fill="#525252" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">PASSWORD</text>
  <rect x="200" y="16" width="240" height="52" rx="20" fill="rgba(23,23,23,0.04)" stroke="rgba(23,23,23,0.32)" stroke-width="1"/><text x="320" y="39" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">A visitor loads the embed</text><text x="320" y="57" fill="#525252" font-size="12" font-family="inherit" text-anchor="middle">not signed in to MangoMap</text>
  <polygon points="320,96 424,148 320,200 216,148" fill="rgba(196,54,12,0.08)" stroke="#c4360c" stroke-width="1.4"/><text x="320" y="143" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Allow public</text><text x="320" y="161" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">access on?</text>
  <polygon points="320,244 424,296 320,348 216,296" fill="#ffffff" stroke="#171717" stroke-width="1"/><text x="320" y="291" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Publishing</text><text x="320" y="309" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">mode?</text>
  <rect x="472" y="122" width="152" height="52" rx="20" fill="rgba(23,23,23,0.04)" stroke="rgba(23,23,23,0.32)" stroke-width="1"/><text x="548" y="145" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Sign-in panel</text><text x="548" y="163" fill="#525252" font-size="12" font-family="inherit" text-anchor="middle">for team members</text>
  <rect x="16" y="412" width="196" height="60" rx="20" fill="rgba(23,23,23,0.04)" stroke="rgba(23,23,23,0.32)" stroke-width="1"/><text x="114" y="439" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Anyone sees the map</text><text x="114" y="457" fill="#525252" font-size="12" font-family="inherit" text-anchor="middle">no sign-in, no password</text>
  <rect x="222" y="412" width="196" height="60" rx="20" fill="rgba(23,23,23,0.04)" stroke="rgba(23,23,23,0.32)" stroke-width="1"/><text x="320" y="439" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Anyone with the link</text><text x="320" y="457" fill="#525252" font-size="12" font-family="inherit" text-anchor="middle">embed the private link</text>
  <rect x="428" y="412" width="196" height="60" rx="20" fill="rgba(23,23,23,0.04)" stroke="rgba(23,23,23,0.32)" stroke-width="1"/><text x="526" y="439" fill="#171717" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Password form</text><text x="526" y="457" fill="#525252" font-size="12" font-family="inherit" text-anchor="middle">in the frame, then the map</text>
</svg>
<svg class="hidden dark:block" style="width: 100%; height: auto" viewBox="0 0 640 488" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="embed-access-flow-inline-dark-title embed-access-flow-inline-dark-desc">
  <title id="embed-access-flow-inline-dark-title">What an embed shows</title>
  <desc id="embed-access-flow-inline-dark-desc">Flowchart for a visitor who is not signed in: if Allow public access is off, the frame shows a sign-in panel; if it is on, a Public map shows to anyone, a Link-only map shows when the embed uses the private link, and a Password map shows a password form in the frame first.</desc>
  <defs>
    <marker id="embed-access-flow-inline-dark-arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#a3a3a3"/></marker>
    <marker id="embed-access-flow-inline-dark-arrow-accent" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto"><polygon points="0 0, 8 3, 0 6" fill="#ff7a4d"/></marker>
  </defs>
  <rect width="100%" height="100%" fill="#141414"/>
  <path d="M320 68 L320 94" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <path d="M424 148 L470 148" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <path d="M320 200 L320 242" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <path d="M216 296 L122 296 Q114 296 114 304 L114 410" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <path d="M320 348 L320 410" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <path d="M424 296 L518 296 Q526 296 526 304 L526 410" fill="none" stroke="#a3a3a3" stroke-width="1.2" marker-end="url(#embed-access-flow-inline-dark-arrow)"/>
  <rect x="434" y="124" width="26" height="16" rx="2" fill="#141414"/><text x="447" y="136" fill="#a3a3a3" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">NO</text>
  <rect x="328" y="213" width="34" height="16" rx="2" fill="#141414"/><text x="345" y="225" fill="#a3a3a3" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">YES</text>
  <rect x="137" y="272" width="56" height="16" rx="2" fill="#141414"/><text x="165" y="284" fill="#a3a3a3" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">PUBLIC</text>
  <rect x="328" y="371" width="74" height="16" rx="2" fill="#141414"/><text x="365" y="383" fill="#a3a3a3" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">LINK-ONLY</text>
  <rect x="439" y="272" width="72" height="16" rx="2" fill="#141414"/><text x="475" y="284" fill="#a3a3a3" font-size="10" font-weight="600" letter-spacing="0.1em" font-family="inherit" text-anchor="middle">PASSWORD</text>
  <rect x="200" y="16" width="240" height="52" rx="20" fill="rgba(242,242,242,0.05)" stroke="rgba(242,242,242,0.34)" stroke-width="1"/><text x="320" y="39" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">A visitor loads the embed</text><text x="320" y="57" fill="#a3a3a3" font-size="12" font-family="inherit" text-anchor="middle">not signed in to MangoMap</text>
  <polygon points="320,96 424,148 320,200 216,148" fill="rgba(255,122,77,0.10)" stroke="#ff7a4d" stroke-width="1.4"/><text x="320" y="143" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Allow public</text><text x="320" y="161" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">access on?</text>
  <polygon points="320,244 424,296 320,348 216,296" fill="#1c1c1c" stroke="#f2f2f2" stroke-width="1"/><text x="320" y="291" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Publishing</text><text x="320" y="309" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">mode?</text>
  <rect x="472" y="122" width="152" height="52" rx="20" fill="rgba(242,242,242,0.05)" stroke="rgba(242,242,242,0.34)" stroke-width="1"/><text x="548" y="145" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Sign-in panel</text><text x="548" y="163" fill="#a3a3a3" font-size="12" font-family="inherit" text-anchor="middle">for team members</text>
  <rect x="16" y="412" width="196" height="60" rx="20" fill="rgba(242,242,242,0.05)" stroke="rgba(242,242,242,0.34)" stroke-width="1"/><text x="114" y="439" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Anyone sees the map</text><text x="114" y="457" fill="#a3a3a3" font-size="12" font-family="inherit" text-anchor="middle">no sign-in, no password</text>
  <rect x="222" y="412" width="196" height="60" rx="20" fill="rgba(242,242,242,0.05)" stroke="rgba(242,242,242,0.34)" stroke-width="1"/><text x="320" y="439" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Anyone with the link</text><text x="320" y="457" fill="#a3a3a3" font-size="12" font-family="inherit" text-anchor="middle">embed the private link</text>
  <rect x="428" y="412" width="196" height="60" rx="20" fill="rgba(242,242,242,0.05)" stroke="rgba(242,242,242,0.34)" stroke-width="1"/><text x="526" y="439" fill="#f2f2f2" font-size="14" font-weight="600" font-family="inherit" text-anchor="middle">Password form</text><text x="526" y="457" fill="#a3a3a3" font-size="12" font-family="inherit" text-anchor="middle">in the frame, then the map</text>
</svg>
{/* /diagram:embed-access-flow */}

What a visitor sees first depends on the map's access:

- **Public or Link-only:** the map.
- **Password:** a password form. After the visitor enters the password, the map loads. The browser remembers the password until the visitor closes the tab.
- **Team only:** a `Sign in to view this map` panel. `Sign in` opens a sign-in window. After the visitor signs in, the map loads. If the host page is reloaded, the visitor signs in again.

This is a map for team members only, embedded in a team wiki page and opened by a visitor who is not signed in:

<img src="/_assets/map-access/embed-a-map--sign-in.png" alt="A Notion page titled Q4 Site Visits — Field Team Handbook with an embedded MangoMap frame that shows the Sign in to view this map panel and an orange Sign in button" width="1600" height="960" />

## How changes to the map reach the embed

The iframe shows the live map, so:

- Changes to layers, styles, popups, and tools show in every embed at once. You do not need new embed code.
- A new `Initial view` changes where every embed opens.
- A change to the map's access changes who can see the embed. If you turn `Allow public access` off, visitors who are not signed in see the sign-in panel instead of the map.
- If you regenerate a `Link-only` map's private link, embeds that use the old link stop working. Update their `src`.

To remove the embed, delete the iframe from the host page.

## Troubleshooting

**The frame shows `Sign in to view this map`.** `Allow public access` is off. Publish the map to the web, or keep it for signed-in team members only. See [How to publish a map to the web](/docs/map-access/publish-map-to-web).

**`Sign in` does nothing, or a message says the browser blocked the sign-in popup.** The browser blocked the sign-in window. Allow popups for the host site, then click `Sign in` again.

**The frame shows the password form on every visit.** The password is kept only until the browser tab closes. Visitors enter it again in a new tab.

**The legend, a popup, or a tool panel covers the map, or is cut off.** The frame is too small. Make it the full width of the column and at least 600 pixels high. See [Make the map large](#make-the-map-large).

**The map shows, but at the wrong place.** The embed opens at the map's `Initial view`. See [How to set the initial map view](/docs/map-settings/set-initial-map-view).

**An embed that used to work now shows an error.** The `Link-only` private link may have been regenerated. See [Private link no longer works](/docs/map-access/troubleshoot-private-link-not-working).

## Related

- [How to publish a map to the web](/docs/map-access/publish-map-to-web): choose the access mode before you embed.
- [How to configure map access](/docs/map-access/configure-map-access): all the access controls.
- [How to set the initial map view](/docs/map-settings/set-initial-map-view): choose where embeds open.
- [How to share a map as a PDF](/docs/map-access/share-map-as-pdf): share a fixed snapshot instead of a live map.