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)

...

Summary

This guide provides step-by-step instructions to help you embed MazeMap Maps on your website using an HTML iframe code snippet. Whether you want to use a pre-configured snippet or customise it yourself, this guide will assist you in setting up the embedding process for a seamless user experience.

Skill Level

Intermediate / Familiarity with HTML, JavaScript, and basic web development concepts.

Prerequisites

Before you begin, please ensure the following:

• Your website supports embedding of <iframe>.

• You have received the required CONFIG_TAG.

• If applicable, the VIEW_ACCESS_TOKEN (for private maps) from MazeMap.

• Ensure your site’s Content Security Policy (CSP) allows embedding from https://use.mazemap.com.

Specific Setup

Option A: Customise the Snippet Yourself

1. Obtain a config tag from your Customer Success Manager.

2. Modify the provided snippet:

   • Replace CONFIG_TAG_HERE with your tag.

   • Replace VIEW_ACCESS_TOKEN_HERE if embedding a map view, or remove this parameter if not needed.

   • Adjust width and height properties to fit your website’s layout.

   • Consider adding a “View Maps” button outside the IFrame for opening the map in a new tab or window.

<iframe allow="web-share geolocation magnetometer gyroscope" id="mazemap-app-iframe" width="600100%" height="420" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?campusidconfig=CAMPUSCONFIG_IDTAG_HERE&campuses=CAMPUS_TAG_HERE&utm_medium=iframeview_access_token=VIEW_ACCESS_TOKEN_HERE" style="border: 1px solid grey" allow="geolocation"></iframe><br/><small><a href="https://www.mazemap.com/">Map by MazeMap</a></small>

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 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.
  

...

></iframe>

Option B: Ask MazeMap for Example Code Snippet

Request a pre-configured snippet from your Customer Success Manager. They will provide you with a ready-to-use code snippet tailored to your use case.

Special Considerations

• Linking to Specific Campus ID: Append &campusid=X to the <iframe> URL if you need to link to a different campus than the one specified in your config.

• Allowing “Web Share API”: To enable native web sharing from the <iframe>, add allow="web-share" to the <iframe> tag.

  Read more: Allowing Web Share on Third-Party Sites

• Accessibility Compliance: Ensure the embedded iframe is accessible to all users, including those using screen readers or other assistive technologies. Add appropriate title attributes and consider keyboard navigation.

• Content Security Policy (CSP): Verify that your site’s CSP allows embedding content from https://use.mazemap.com.

• Performance Optimisation: Use lazy loading for the iframe if it’s not immediately visible on page load to improve page performance.
  

  Code Block
  language html
  <iframe loading="lazy" ...></iframe>

Process

1. Choose your setup option: Use a pre-configured snippet or customize it yourself.

2. Embed the IFrame snippet: Place the code on your webpage.

3. Configure additional features: Adjust for specific campus IDs or enable Web Share API as needed.

4. Implement custom share link handling: Ensure shared links point to your domain and are processed correctly.

Example Scenarios

• University Campus Map: Embedding a map for a university campus to allow students and visitors to navigate easily.

• Hospital Navigation: Providing a hospital map to help patients and visitors find their way around the facility.

Troubleshooting

• URL Issues: Ensure that URLs are correctly formatted and valid, especially when handling custom share links.

• Campus ID Linking: Verify the campus ID if linking to a specific location is necessary.

• Web Share API: Test the web share functionality thoroughly before deploying.

Maintenance and Updates

Regularly review the embedded MazeMap to ensure compatibility with updates or changes in the MazeMap platform or your website’s framework.

Common Issues and FAQ

• Why is my map not displaying correctly?

  • Ensure that the iframe URL is correctly formatted and that the CONFIG_TAG and VIEW_ACCESS_TOKEN are properly set.

• Can I customize the look and feel of the embedded map?

  • Basic customisation is possible by modifying the iframe’s size and adding external buttons, but more detailed customizations require the JS API.

Additional Resources

• MazeMap JS API Documentation

• Content Security Policy Guidelines

Support

If you encounter issues not covered in this guide, please reach out to your Customer Success Manager or contact MazeMap Support.

Conclusion

Embedding MazeMap into your website can be straightforward with the correct setup and customisation. This guide should provide all the necessary information, whether you opt for a pre-configured snippet or prefer to adjust the setup yourself. For further customisation or troubleshooting, consult with your Customer Success Manager.