SteadyMaps Setup Guide - Self-hosted map widget integration

What you receive

Each Steady Map is prepared for one business location and delivered as a ready-to-host package containing map data, point-of-interest data, style assets, JavaScript, CSS, icons, fonts, and an integration example.

1. Upload the package

Copy the delivered folder to your website, for example under /steadymaps/. The map should be served from the same domain as your page so visitors do not need to contact a third-party map provider just to see your location.

2. Add the widget assets

Add the bundled module script and stylesheet to the page where the map should appear. Use the filenames from your delivered package.

HTML

<html>
  <head>
    <script type="module" crossorigin src="./assets/index-5faiv-EO.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-C6n9ibJW.css" />
  </head>
  <body>
    <div
      id="map-widget"
      data-map-file="./data/cottbus.xmap"
      data-style-file="./data/style-default.zip"
      data-poi-file="./data/cottbus.json"
      data-lon="14.3343"
      data-lat="51.7607"
      data-zoom="14"
      data-show-google-maps-open-action="true"
      data-show-google-maps-navigation-action="true"
      data-poi-render-debounce-ms="0"
      data-poi-idle-query-debounce-ms="100"
      data-bbox="14.253303,14.52149,51.672403,51.884176"
    ></div>
  </body>
</html>

3. Configure the widget

The container points at your local map data, style package, and point-of-interest data. Optional attributes control the initial map position, dark mode, debug overlays, and external navigation actions.

Dark mode

Add data-ui-theme="dark" to render map controls and attribution in a darker style.

Google Maps handoff

The map itself makes no automatic Google requests. Optional buttons can open Google Maps for directions or a wider view only after the visitor chooses that action.

Bounds and zoom

Use the delivered center, zoom, and bounding-box values so the map opens on the right local context for your business.

4. Publish and test

Publish the page, open it in a private browser window, and confirm that the map loads from your own domain. If you enabled Google Maps actions, click them once to confirm they open the external navigation experience in a new tab.