Embedding a map on your website

An embedded map puts one of your projects inside a page of your own website: its shapes, their measurements and, if it is priced, its estimate. Visitors look at it right there, without an account, and can open it in Measure Map Online if they want more room.

Which projects can be embedded#

What your website's visitors see depends on the project's access level:

• visibilityView only and publicPublic projects show on your page. Visitors can look but not change anything: editing is off inside an embedded map, even for a project's members.
• person_pin_circleOpen Guest projects are the exception: visitors can measure in them and ask you for an estimate.
• lockPrivate projects do not open for your visitors.

Set the project's access level in its share settings before you embed it.

Get the embed code#

1. In the dashboard, press codeDeveloper, then web_assetEmbed a map. The embed always uses your live key: projects made with a sandbox key cannot be opened by your website's visitors (see live and sandbox).
2. Under Get your API key, if the page shows no key yet, press addGenerate new key. See API keys.
3. Under Set the project ID, type part of the project's name in Pick a project and choose it from the list. The list says how each project is shared, and leaves out templates and projects in the trash. If you pick a Private project, the page warns that your visitors cannot open it and offers visibilityMake it view only.
4. Under Embed code, choose how the map looks:
   • Theme: Auto follows each visitor's own light or dark setting; or always Light or Dark.
   • Units: Auto (visitor’s country) shows imperial units to visitors in the United States and metric to everyone else; or always Imperial or Metric.
   • Map type: Satellite, Map, Hybrid or Terrain.
   • Width and Height of the map on your page, in pixels (200 to 2000).
5. Check the Live preview.
6. Press content_copy next to Embed code and paste the code into your page's HTML, where the map should appear.

The code contains your API key, so the map keeps working until you replace the key, on the websites the key allows. After you replace it, the old key is still accepted for 24 hours: paste the new code into your pages within that time. Only the Live preview on this page uses a short-lived token instead.

To keep the key off your pages altogether, have your website's server ask for a token each time the page is shown. See key or token, which also lists every setting the embed address takes.

Restrict the map to your websites#

By default an embed works on any website. To stop other sites from showing your maps, press codeDeveloper > vpn_keyAPI keys and add your own websites, such as example.com, under Website restrictions. A website on the list also covers its subdomains. Once the list has at least one website, a map embedded anywhere else does not open. See restrict the key to your websites.

What visitors can do#

In an embedded map, visitors can:

• move around and zoom, and click a shape to read its measurements;
• see the project's estimate, when it has one;
• press settings to change the map type and the measurement units (see settings);
• press the Measure Map Online button in the bottom-right corner to open the project in a new tab.

In an Open Guest project they can also draw and measure, and press Request an estimate to send you their details.

Editing is off in every other embedded map, even for the project's members. To build the embed from your own code, or to put a short-lived token in it instead of your key, see the iFrame API.