iFrame embedding

Usage

You can use an iFrame to embed any public or unlisted map on your website. To do so, create an iFrame and set the source to https://app.cartes.io/maps/{your-map-id}/embed?type=map. Just like on the site, you can use lat, lng, and zoom in the URL query parameters to set the map to a specific position.

Demo map code

To embed the demo map for example, you'd use the following code.

<iframe src="https://app.cartes.io/maps/048eebe4-8dac-46e2-a947-50b6b8062fec/embed?type=map"
  width="100%"
  height="400"
  frameborder="0"></iframe>

Whuch would result in the following interactive map:

postMessage events

You can listen to postMessage events emitted when embedding a map using iFrames. Each event is an object, containing the event type (see below), and the data.

For security reasons, you should always verify that the origin is "https://app.cartes.io".

See the example in JSFiddle: https://jsfiddle.net/cLpvtbej/2/

window.addEventListener("message", (event) => {
  if (event.origin !== "https://app.cartes.io") {
    return;
  }
  console.log(event.data.type, event.data.data);
}, false);

Read more about using postMessage here: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

updated_map

Emitted when the map settings are updated. The map object will be available in the data key.

deleted_map

Emitted when the map is deleted. The map object will be available in the data key.

created_marker

Emitted when a marker is created. The marker object will be available in the data key.

deleted_marker

Emitted when a marker is deleted. The marker object will be available in the data key.