Issues with HotelMap embeds

Issue Overview:

If you're experiencing issues with a HotelMap embed, such as content appearing at the bottom of your page or breaking the EE Builder, read on. This is a known recurring issue with the code outputted by HotelMap.com. While we have previously worked with their support to fix this for specific sites, they have yet to implement a universal fix for all sites.

Temporary Workaround:

To help you manage this issue temporarily, we have devised a workaround. This involves loading the script within an iframe.

Please follow the instructions below:

Copy the below code into a text editor.
Replace [Paste their embed code here] with the embed code provided by HotelMap.com.
Copy and paste the updated code into your the HTML/Embed module you are using in Event Engine.

<iframe id="hotelmap_iframe" onload="resizeIframe(this)" style="width: 100%; border: none; overflow: hidden;"></iframe>
    
    <script>
        const iframeContent = `
            <!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Hotel Map</title>
                <style>
                    body {
                        margin: 0;
                        overflow-x: hidden;
                    }
                    #hotelmap_script {
                        width: 100%;
                    }
                </style>
            </head>
            <body>
            <!— ******************* —>
            <!— Their embed goes below —>
                

            [Paste their embed code here]

            <!— Their embed goes above —>
            <!— ******************* —>
            </body>
            </html>
        `;


        const iframe = document.getElementById('hotelmap_iframe');
        iframe.srcdoc = iframeContent;


        function resizeIframe(iframe) {
            iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
        }


        iframe.onload = function() {
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            const observer = new MutationObserver(() => {
                iframe.style.height = iframeDocument.body.scrollHeight + 'px';
            });
            observer.observe(iframeDocument.body, { childList: true, subtree: true });
        };
    </script>

Explanation:

This code forces the HotelMap script to load in an isolated iframe, preventing it from affecting the rest of your page.

Important Notes:

This workaround code is provided without warranty. It aims to address a known bug with HotelMaps.
We strongly recommend filing a support ticket with HotelMaps to resolve their ongoing injection issues.
If this workaround does not work as expected, you will need to contact HotelMaps support. Inform them that their code causes JavaScript errors and places content at the bottom of the page.
Sometimes the HotelMaps embed script might need to close with <\/script> instead of </script>.

Example:

<script async src="<HOTELMAP LINK>"></script>
OR
<script async src="<HOTELMAP LINK>"><\/script>

By following this workaround, you should be able to manage the embed issue temporarily while waiting for a permanent fix from HotelMaps.