Embed with iframe

Embed with iframe

The fastest way to add a Mapsemble map to your website is with a standard HTML iframe. No JavaScript or build tools required.

Basic usage

Paste the following iframe tag into your HTML where you want the map to appear:

<iframe
  src="https://app.mapsemble.com/embed/YOUR_MAP_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="geolocation">
</iframe>

Prerequisites

Your map must be published before it can be embedded. Toggle the publish switch in your map settings to make it available.

Finding your map ID

Your map ID is visible in two places:

• In the URL bar when editing your map (e.g., https://app.mapsemble.com/maps/abc123/edit — the ID is abc123)
• In the Embed panel inside the map editor, where a ready-to-copy embed code is provided

URL parameters

You can append query parameters to the embed URL to customize behavior:

• language — Set the map interface language (e.g., ?language=es). This requires translations to be configured in your map settings.
• mode — Optional rendering mode for the embedded map.

Example:

https://app.mapsemble.com/embed/YOUR_MAP_ID?language=es

Responsive sizing

For a full-width map, set width="100%" and a fixed pixel height:

<iframe
  src="https://app.mapsemble.com/embed/YOUR_MAP_ID"
  width="100%"
  height="600"
  frameborder="0"
  allow="geolocation">
</iframe>

For a fixed aspect ratio (e.g., 16:9), wrap the iframe in a container with the padding-bottom technique:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <iframe
    src="https://app.mapsemble.com/embed/YOUR_MAP_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allow="geolocation">
  </iframe>
</div>

Geolocation permission

Include allow="geolocation" on the iframe if your map uses the location filter, so users can share their browser location with the map. Without this attribute, the browser will block geolocation requests inside the iframe.

Security headers

Mapsemble enforces embedding security via Content-Security-Policy: frame-ancestors headers. If you have configured a domain whitelist in your map settings, only those domains will be allowed to embed the map. Requests from unlisted domains will be blocked by the browser.

Caching

Embedded maps use ETag-based caching with a 5-minute cache duration. This means returning visitors will see a cached version of the map unless the data has changed, reducing load times and server requests.

SEO

Embedded maps include an X-Robots-Tag: noindex, nofollow header. This prevents search engines from indexing the iframe content, ensuring only your main site pages appear in search results.

When to use iframe vs widget.js

If you need to listen for filter changes, sync state between your page and the map, or dynamically resize the iframe, see Widget.js Reference.