Who/What is this for?
When you want to have MazeMap Maps on your web site, for people to use.
This guide explains how to find the IFrame for your campus and the steps needed to add an Iframe to your website.
How to integrate - easiest way:
Use this snippet and replace with your campus id and campus collection tag (provided by your Customer Success Manager)
Replace CAMPUS_ID_HERE with your id for the campus.
Replace CAMPUSget an HTML IFrame code snippet to use for your web site to show the MazeMap application.
Example: Maps inside an IFrame on a website
...
Alternative A) The easiest way:
Ask your Customer Success Manager to get a code snippet for your use case. They will go through the steps below and give you a code snippet ready to go.
Alternative B) Modify the snippet yourself
Get a config tag from your Customer Success Manager
Use the snippet below and add your own app config tag
Replace CONFIG_TAG_HERE with your tag for all your campuses, or a single campus if you want.
| Code Block | ||
|---|---|---|
| ||
<iframe width="600100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?campusid=CAMPUS_ID_HERE&campuses=CAMPUSconfig=CONFIG_TAG_HERE&utm_medium=iframe" style="border: 1px solid grey" allow="geolocation"></iframe><br/><small><a href="https://www.mazemap.com/">Map by MazeMap</a></small>iframe> |
Put this code on your web page and it should work!
You can edit the width and height properties to make it fit within your own page. We do recommend making it quite large for good user experience.
The “Map by MazeMap” part is optional, and not compulsory.
We also recommend adding a button outside of the IFrame to allow users to open the maps link in a separate tab, as seen in or in their native application if they have it installed. In the example above.
Done!
How to integrate - customized view, step by step:
Locate the campus tag code for the IFrame (You will get a campus tag from your Customer Success Manager) and go to the url use.mazemap.com/?campuses=yourcampustag
When in use.mazemap.com, you can change zoom levels and floor level to your desired view.
Click the “share” button in the menu and go to the “Embed map” tab.
Copy the url
Make sure to change embed.html to index.html if you want the full mazemap features, like search.
...
image above, there is a button named “View maps” that links to the same url and opens the maps in a new window or tab.