Embed JS

Boldmapper's Embed JavaScript module allows you to add (or embed) maps to a web page. The following is a guide of the module's usage and features.

Basic Example

The following assumes you have a map with an ID of abcd-1234-defg-5678-hijk. To embed this map on a webpage, you can do the following:

  • Add an element to the page's HTML where you want the map to appear:

<div id="my-store-locator"></div>
  • Add a script to the page's <head> or just before the closing </body> tag to initialize and mount the embed:

<script type="module">
  import Embed from 'https://boldmapper.com/embed.js';
  const embed = new Embed({ mapId: 'abcd-1234-defg-5678-hijk' });

The above script imports the Embed module, creates a new embed instance with the given map ID, and mounts it on the target element. The result is a Boldmapper map being rendered at the target element when the page is loaded.


The Embed instance can take the following parameters when being initialized:


Embed instances have the following methods available to them:


Mounts the embed to the specified element. The argument can be either a DOM element or a CSS selector string (the first matching element will be used).

// Mounting via CSS selector string

// Mounting via DOM Element


Removes the embed from the page, restoring the mount element to it's pre-mount state. This can be useful when an explicit teardown is required (e.g. when rendering maps on pages with non-standard navigation handling, like Single Page Apps or Turbolinks).

Last updated