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.

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.
  
  

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