# 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:

```html
<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:

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

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.

## Options

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

<table><thead><tr><th width="193">Option</th><th width="443.3333333333333">Description</th><th>Default</th></tr></thead><tbody><tr><td>mapId</td><td><strong>Required.</strong> The ID of the map you wish to render. This should be a UUID string and can be found on your map's Settings page.</td><td>N/A</td></tr><tr><td>onLoad</td><td>A callback function that is triggered when the embed and its map container are loaded.</td><td>null</td></tr><tr><td>onLocationSelect</td><td>A callback function that is triggered when a location is selected, either by click or via a search result. The callback function can take a "location" argument which contains some information about the selected location (e.g. name, address).</td><td>null</td></tr></tbody></table>

## Methods

Embed instances have the following methods available to them:

### mount()

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).

```javascript
// Mounting via CSS selector string
embed.mount('#some-element');

// Mounting via DOM Element
embed.mount(document.body.lastChild);
```

### unmount()

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).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.boldmapper.com/embed-js.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
