Embed your interactive map in a Wix website

Step-by-Step Guide: Embedding Your Map in Wix

Easily embed your interactive Mapme map into your Wix website. Wix allows you to customize how the map appears on your webpage, including displaying it at full width on both desktop and mobile devices.

Due to Wix’s handling of geolocation, we’ve developed a custom implementation to ensure GPS functionality works seamlessly on Wix websites.

Follow this guide to embed your Mapme map in Wix.

Get the map URL

1. Open the “Share” menu.
2. Copy the map URL.

Edit the Embed code

In the code below, replace: https://viewer.mapme.com/example with your map URL.

<iframe src="https://viewer.mapme.com/example?geolocationOverride=1" width="100%" height="100%" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

<script>
    window.addEventListener("message", event => {
        try {
            // Parse the JSON string to get the coordinates
            const innerIframe = document.querySelector('iframe');
            if (innerIframe && innerIframe.contentWindow) {
                // Forward coordinates to Viewer iframe
                const data = JSON.parse(event.data);
                innerIframe.contentWindow.postMessage(
                    { type: "mapmeGeolocation", data }, 
                    "*"
                );
                // console.log("Data received from Wix and passed to Viewer:", data);
            }
        } catch (e) {
            console.error("Error processing message data:", e);
        }
    });
</script>

Embed your map in Wix

In your Wix editor, click on:  Add Elements > Embed Code -> Popular Embeds -> Embed HTML Paste the Code in the HTML settings window that appears:

Add Geolocation support script

In the top menu, Click on Dev Mode > Turn on Dev Mode and paste the script below:

import wixWindowFrontend from "wix-window-frontend";
$w.onReady(() => {
setInterval(() => {
wixWindowFrontend.getCurrentGeolocation()
.then(event => {const 
payload = JSON.stringify(event);
// console.log('message sent:', payload);
$w('#html1').postMessage(payload);
})
.catch(err => {console.error('wixWindowFrontend error', err);
});
}, 5000);
});

Customize the display of your map on your Wix web pages

We recommend you display your map in full width in order to provide the best user experience. In the Wix editor, select the “Stretch” button to enable full width. In order to set the view for mobile users, switch to Mobile View and adjust the height of the map embed. Review our embed guide for more options and information on embedding Mapme in a website.