Iframe Support

Embed MapVX maps into your web application using an iframe. Choose the integration pattern that fits your use case.

Indoor Place

Use this when embedding a map for a specific building or indoor venue.

Build the URL:
```
https://<CUSTOM_URL>/places/<PLACE_PARENT>?apiKey=<API_KEY>
```
Replace <CUSTOM_URL> with your SDK deployment URL, <API_KEY> with your MapVX API key, and <PLACE_PARENT> with the parent place ID for your building.

Add the iframe to your HTML:


<iframe
  src="https://<CUSTOM_URL>/places/<PLACE_PARENT>?apiKey=<API_KEY>"
  width="1500px"
  height="500px"
></iframe>

To center the map on a specific location inside the building, append the origin parameter:
```
https://<CUSTOM_URL>/places/?apiKey=<API_KEY>&origin=<ORIGIN_ID>
```

Outdoor Place

Use this when embedding an overview map of all available places.

Build the URL:
```
https://<CUSTOM_URL>/?apiKey=<API_KEY>
```

To set the center or pre-configure a route, append origin and/or destination:


# Origin only
https://<CUSTOM_URL>?apiKey=<API_KEY>&origin=<ORIGIN_ID>

# Destination only
https://<CUSTOM_URL>?apiKey=<API_KEY>&destination=<DESTINATION_ID>

# Both (auto-calculates route)
https://<CUSTOM_URL>?apiKey=<API_KEY>&origin=<ORIGIN_ID>&destination=<DESTINATION_ID>

Embed in your HTML:


<!-- General view -->
<iframe src="https://<CUSTOM_URL>/?apiKey=<API_KEY>" width="1500px" height="500px"></iframe>
 
<!-- Open a specific place profile -->
<iframe
  src="https://<CUSTOM_URL>/?apiKey=<API_KEY>&destination=<DESTINATION_ID>"
  width="1500px"
  height="500px"
></iframe>
 
<!-- Open a route between two places -->
<iframe
  src="https://<CUSTOM_URL>/?apiKey=<API_KEY>&origin=<ORIGIN_ID>&destination=<DESTINATION_ID>"
  width="1500px"
  height="500px"
></iframe>

Iframe integration is only supported with URLs generated by our SDK. Contact our support team for more information or assistance.

URL Parameters

Parameter	Type	Description	Example
`destination`	`string`	Place ID for the route destination. When provided, the app pre-configures the navigation target. Combined with `origin`, it auto-calculates the route.	`?destination=place_abc123`
`origin`	`string`	Place ID for the route origin. Defines the starting point for navigation.	`?origin=place_xyz789`
`parentPlace`	`string`	Parent place ID (building, mall, campus). Sets the indoor navigation context for multi-building institutions.	`?parentPlace=building_main`

Map Display

Parameter	Type	Description	Example
`placeid`	`string`	Place ID to highlight on the map. Centers the map on the specified place and shows its info. When used with `staticMap=true`, restricts the map to show only this place.	`?placeid=store_12345`
`lat`	`number`	Latitude for map or user marker positioning. Must be used together with `lng`.	`?lat=-33.4489&lng=-70.6693`
`lng`	`number`	Longitude for map or user marker positioning. Must be used together with `lat`.	`?lat=-33.4489&lng=-70.6693`
`floor`	`string`	Floor ID or key to display initially. For multi-floor venues, selects the floor shown on load.	`?floor=floor_2`
`initialZoom`	`number`	Initial map zoom level. Overrides the default zoom from configuration. Typical values: 15–20 for building view.	`?initialZoom=18`
`initialPitch`	`number`	Initial camera tilt angle in degrees. 0 = top-down view, 60 = tilted 3D view. Range: 0–85.	`?initialPitch=45`
`initialBearing`	`number`	Initial map rotation angle in degrees. 0 = north up, 90 = east up. Range: 0–360.	`?initialBearing=90`
`bearing`	`number`	Deprecated — use `initialBearing` instead. Map rotation angle. Default: `-1` (uses default config).	`?bearing=180`
`transitionDelay`	`number`	Delay in milliseconds before applying the initial map transition. Creates a loading animation effect. Useful for presentations or demos.	`?transitionDelay=1000`

UI Controls

Parameter	Type	Default	Description
`staticMap`	`"true"` \| `"false"`	`"false"`	Activates static map mode for iframe embeds. When `"true"`, restricts the map to show only the place specified in `placeid`. Ideal for embedded widgets.
`compactHeader`	`"true"` \| `"false"`	`"false"`	Activates a compact version of the header. Reduces the navigation bar size to maximize map space.
`minimize`	`"true"` \| `"false"`	`"false"`	Minimizes the user interface. Hides non-essential UI elements and enables CSS customization theme loading.
`hideFilter`	`"true"` \| `"false"`	`"false"`	Hides the category filter slider.
`hideMenu`	`"true"` \| `"false"`	`"false"`	Hides the side menu (drawer), maximizing the map area.
`categoryIndex`	`number`	`-1`	Index of the category filter to open automatically (0-indexed). `-1` means no category is selected.
`loadParentPlacesAsSubPlaces`	`"true"` \| `"false"`	`"false"`	When `"true"`, loads parent places as sub-places. Used for special indoor/outdoor state handling.

Allowing Geolocation in an Iframe (Outdoor Only)

To enable location tracking in the iframe — for positioning the user on the map or generating routes from the user’s location — add the allow attribute:


<iframe
  src="https://<CUSTOM_URL>/places/<PLACE_PARENT>?apiKey=<API_KEY>"
  width="1500px"
  height="500px"
  allow="geolocation *"
></iframe>

Important: Your site must use HTTPS to request the user’s location. On desktop, a browser permission popup will appear. On mobile, permission is managed through the browser settings. Location data is only used for map positioning and route generation — it is not stored in our services.

Iframe Interactions with the Parent Site

Communication between the embedded iframe and the parent site uses the postMessage API .

Currently, only messages from the iframe to the parent are supported.

Supported Messages

Message	Trigger	Description
`logo-back-home`	User clicks the institution logo	Notifies the parent page that the user wants to navigate back to the home page.

Institution logo example

Hiding Interface Elements (Static Map)

To hide navigation bars, cards, filter cards, and floor selectors, add staticMap=true to the URL. Combined with placeid, this opens a specific place profile in a read-only view where clicks on other places are disabled.


<iframe
  src="https://<CUSTOM_URL>/<API_KEY>/<INSTITUTION_ID>?parentPlace=<PARENT_PLACE_ID>&placeid=<PLACE_ID>&staticMap=true"
  width="1500px"
  height="500px"
></iframe>

staticMap=true disables all interactive UI elements
placeid restricts interaction to the specified place only
The place detail panel remains visible but does not allow generating new routes