...
| Code Block |
|---|
|
// Example code on customer web page
// When opening link such as:
// https://your-domain.com/maps/?mazemap_share_url=https%3A%2F%2Fuse.mazemap.com%2F%23v%3D1%26config%3Dcustomer-example-config%26center%3D10.407538%2C63.432910%26zoom%3D19%26zlevel%3D6%26utm_medium%3Dcustom_share_url
const DEFAULT_MAZEMAP_IFRAME_URL = new URL('https://use.mazemap.com/?config=YOUR_CONFIG');
function setMazeMapIframeUrl(url) {
const iframe = document.getElementById("mazemap-app-iframe");
if (url && url.href) {
iframe.src = url.href;
}
}
// Read the url
const url = new URL(location.href)
// Get the mazemap share url
const mazemapUrlString = url.searchParams.get('mazemap_share_url')
if (mazemapUrl) {
try {
// Attempt to convert the url string into a proper URL
// If the url is not valid or malformed, this will fail and
// end up in the catch block.
const url = new URL(string);
// After valid url parsing, update the iframe with the shared mazemap url
setMazeMapIframeUrl(url);
} catch (e) {
console.error("Error valiadating url", e);
// Fall back to setting the default iframe URL if there was an error
setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
}
} else {
// If no MazeMap share url was found, just set the default url
setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
}
|
Full HTML example for full page embed:
| Code Block |
|---|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
/* Optional: Disable scrollbars */
}
#mazemap-app-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
/* Optional: Remove border */
}
</style>
</head>
<body>
<iframe allow="web-share geolocation magnetometer gyroscope" id="mazemap-app-iframe" width="100%" height="100%"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://use.mazemap.com/?config=mazemap-hq"
style="border: 1px solid grey"></iframe>
<script>
// Example code on customer web page
// When opening link such as:
// https://your-domain.com/maps/?mazemap_share_url=https%3A%2F%2Fuse.mazemap.com%2F%23v%3D1%26config%3Dcustomer-example-config%26center%3D10.407538%2C63.432910%26zoom%3D19%26zlevel%3D6%26utm_medium%3Dcustom_share_url
const DEFAULT_MAZEMAP_IFRAME_URL = new URL('https://use.mazemap.com/?config=mazemap-hq');
function setMazeMapIframeUrl(url) {
const iframe = document.getElementById("mazemap-app-iframe");
if (url && url.href) {
iframe.src = url.href;
}
}
// Read the url
const url = new URL(location.href)
// Get the mazemap share url
const mazemapUrlString = url.searchParams.get('mazemap_share_url')
if (mazemapUrlString) {
try {
// Attempt to convert the url string into a proper URL
// If the url is not valid or malformed, this will fail and
// end up in the catch block.
const url = new URL(mazemapUrlString);
// After valid url parsing, update the iframe with the shared mazemap url
setMazeMapIframeUrl(url);
} catch (e) {
console.error("Error valiadating url", e);
// Fall back to setting the default iframe URL if there was an error
setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
}
} else {
// If no MazeMap share url was found, just set the default url
setMazeMapIframeUrl(DEFAULT_MAZEMAP_IFRAME_URL.href);
}
</script>
</body>
</html> |