Appearance

Embed Your First Mapsted Map in 5 Minutes ​

Get an interactive indoor map running in your browser using only a single HTML file and the Mapsted CDN.

Prerequisites ​

  • A text editor
  • A modern web browser (Chrome, Firefox, Safari, or Edge)
  • No build tools required

Steps ​

1. Create an HTML file ​

Create a new file called index.html in any folder on your computer.

2. Add a map container ​

The API renders into a <div> element. Give it a fixed height, otherwise the map has nothing to fill.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Mapsted Map</title>
  <style>
    body { margin: 0; }
    #mapsted-map {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="mapsted-map"></div>
</body>
</html>

3. Add the API script tag ​

Append the CDN <script> tag just before </body>. Replace PROPERTY_ID in the id query parameter with the property you want to load. Use 603 to load the University of Windsor demo property.

html
  <script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=603"></script>

4. Call init() ​

Add a second <script> block that calls mapsted.maps.init() after the API script. Pass the container selector and your property ID.

html
  <script>
    mapsted.maps.init({
      element: document.getElementById("mapsted-map"),
      propertyId: 603
    });
  </script>
Open in Sandbox ↗

Your complete file should look like this:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First Mapsted Map</title>
  <style>
    body { margin: 0; }
    #mapsted-map { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="mapsted-map"></div>
  <script src="https://mapi.mapsted.com/v4.0.1/maps.js?id=603"></script>
  <script>
    mapsted.maps.init({
      element: document.getElementById("mapsted-map"),
      propertyId: 603
    });
  </script>
</body>
</html>
Open in Sandbox ↗

5. Open in your browser ​

Double-click index.html or open it with File > Open in your browser. No local server is required for the CDN approach.

Expected output ​

The page loads the University of Windsor campus. An interactive indoor map fills the viewport. You can pan, zoom, and switch between floors using the built-in floor selector panel. Tapping any room or point of interest highlights it.

V2/V3 event API deprecated

mapsted.maps.addEventListener() and mapsted.maps.removeEventListener() are deprecated V2/V3 compatibility shims. They emit a console.warn and throw MAPSTED-1093 in strict mode. Use the emitter API instead: mapsted.maps.on(), mapsted.maps.off(), and mapsted.maps.once().

Next steps ​