Embed Quickstart

Prerequisites

Before embedding, make sure your map is published. Toggle the Published switch in your map settings -- unpublished maps won't load in embeds.

Two ways to embed

Mapsemble offers two methods to add a map to your website. Choose whichever fits your setup best.

Option 1: iframe (simplest)

The easiest way to embed. Just paste an iframe tag into your HTML:

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

Replace YOUR_MAP_ID with your map's slug or ID, which you can find in the Embed dialog in your dashboard.

The allow="geolocation" attribute is optional but recommended -- it enables the location filter to access the visitor's current position if your map uses location-based filtering.

Option 2: Widget script

For more flexibility, use the Mapsemble widget script. Include the script once and add a div element where you want the map to appear:

<script src="https://app.mapsemble.com/widget.js"></script>
<div data-mapsemble-map="YOUR_MAP_ID"></div>

The widget automatically renders a fully interactive map inside the div. This approach works well when you need to place multiple maps on a single page or want more control over the container element.

URL parameters

You can pass parameters to customize the embedded map's behavior:

Apply parameters to the iframe src URL:

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

Domain whitelist

For security, you can restrict which websites are allowed to embed your map. Configure the list of allowed domains in your Map Settings > Embedding section.

When a domain whitelist is configured, the embed will only load on pages served from those domains. If no whitelist is set, the map can be embedded on any website.

Responsive sizing

Both embed methods work well on responsive sites:

• iframe -- Set width="100%" and the map fills its container. Adjust height to fit your layout or use CSS to make it responsive.
• Widget -- Automatically sizes itself to fill the parent container.

For a fully responsive iframe, you can wrap it in a container with a fixed aspect ratio:

<div style="position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <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>

Next steps

• Embedding Configuration -- Advanced embedding options, custom parameters, and event handling