Iframe support

In order to embed maps functionality from our SDK in your web application using an iframe, choose the case of use that suits your needs and follow the instructions:

Indoor Place

Use the following URL format:
```
https://<CUSTOM_URL>/places/<PLACE_PARENT>?apiKey=<API_KEY>
```
Replace <CUSTOM_URL> with the HTTPS URL of your SDK’s functionality page, <API_KEY> with your actual API key provided from MapVX and <PLACE_PARENT> with the id place provided for your building.

Add the URL to an iframe element in your HTML code:


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

If you need to set the center of the map to a specific location inside your building, add the origin ID at the end of the URL like this:
```
https://<CUSTOM_URL>/places/?apiKey=<API_KEY>&origin=<ORIGIN_ID>
```
Replace <ORIGIN_ID> with the ID of the desired origin.

Outdoor Place

Use the following URL format
```
https://<CUSTOM_URL>/?apiKey=<API_KEY>
```
Replace <CUSTOM_URL> with the HTTPS URL of your SDK’s functionality page, <API_KEY> with your actual API key provided from MapVX to load an overview of all the places that you have.

If you need to set the center of the map to a specific location, add the origin or destination ID at the end of the URL like this


Example only with origin or destination
 https://<CUSTOM_URL>?apiKey=<API_KEY>&origin=<ORIGIN_ID>
 https://<CUSTOM_URL>?apiKey=<API_KEY>&destination=<DESTINATION_ID>
 
Example with origin and destination
 https://<CUSTOM_URL>?apiKey=<API_KEY>&origin=<ORIGIN_ID>&destination=<DESTINATION_ID>

Replace the <ORIGIN_ID> or <DESTINATION_ID> with the id of the desired place. This will also set the origin or the destination of a route if you need it.

Add the URL to an iframe element in your HTML code. There are three possible use cases:

Open a 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>

The ID for all the locations will be automatically generated unless the customer provided specific IDs for the available locations.

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

Allowing Geolocation in an Iframe (Only Outdoor)

To incorporate location tracking capabilities that enable you to monitor user positions on a map or retrieve user location data, add the allow attribute with the value geolocation * to the iframe. This allows the iframe content to access the user’s location information.

!!! info “Important” For avoid interaction issues, this functionality will only be available after confirming the addition of the ‘allow’ parameter to ensure the iframe functions correctly.

The use of location is only for map positioning and generating routes at the moment. It is not used without the client’s consent nor stored in our services.

This functionality is only activated if specifically selected. On desktop, a pop-up window will appear requesting permission. On mobile, permission is granted through the browser, not the website. If you are unable to use the functionality, please review your application’s permissions.

Please remember that your site using our iframe must have HTTPS enabled to request the user’s location.

Example usage:


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

Iframe interactions with Parent Site

To allow this type of interactions, we use the postMessage API for the interactions between the embedded iframe and the parent site. A simplified example of the interaction can be found in this postMessage API tutorial .

At the moment, we only support sending messages from the iframe to the parent place.

Current Interactions

The following messages are currently being supported by the website

logo-back-home : This message is sent when you click the institution logo on the screen

Hiding Interface Elements on the Map

To hide certain interface elements on the map, such as the navigation bar, cards, filter cards, and floor selector, you can add the staticMap=true parameter to the map URL. Additionally, you can use the placeid parameter to open the profile of a specific place directly. This will display the place’s profile and disable clicks on other places.

The place details (place-detail) remain visible but do not allow generating a new route from there.

Example URL


https://<CUSTOM_URL>/<API_KEY>/<INSTITUTION_ID>?parentPlace=<PARENT_PLACE_ID>&placeid=<PLACE_ID>&staticMap=true

Replace <CUSTOM_URL> with the HTTPS URL of your SDK’s functionality page.
Replace <API_KEY> with your API key provided by MapVX.
Replace <INSTITUTION_ID> with the ID of the institution.
Replace <PARENT_PLACE_ID> with the ID of the parent place.
Replace <PLACE_ID> with the ID of the specific place you want to display.

Example Usage in an Iframe


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

Additional Notes

These parameters are useful for cases where a static map is required without advanced interactions.
The placeid parameter ensures that only the specified place is interactable, while other places are disabled.
If you need more information or support, contact our support team.