The Embed Guide

Easily embed your interactive maps into virtually any website, including platforms like WordPress, Wix, Weebly, and Squarespace.

The embedded map is fully responsive, automatically adjusting to fit the available space on any screen—whether desktop, tablet, or mobile.

The Mapme embed code uses a standard iframe, making it simple to customize and seamlessly integrate your map into your website. You can find the embed code and all related embed settings in the editor under the Share tab. 

• Embed map best practices
• Test your map embed
• Set the size of the embed area
• Auto-expand map fullscreen
• Open your map on a specific category or location
• Share different versions of your map
• Hide the content panel when opening your map
• Customize your map border
• Embed guide for some popular Website builders and ecommerce platform

Embed Map Best Practices

We recommend embedding your map in a space that is as wide as possible, ideally using the entire width and height of the screen. This will provide the best user experience on both large screens and mobile devices.

By default, the map embed code is set to fill 90% of the user screen height. You can easily change this value in the embed code.

We do not recommend using pixel values to set the width and height of your map embed because the map might end up being higher than the screen on certain devices, making it difficult to use.

Here is a good example of a full-page embed that integrates seamlessly with the other page elements like the navigation menu.

We also have a blog post that offers a comprehensive guide to the best practices for integrating interactive maps into your website.

Small embed area

If you have limited real estate available on your web page, we highly recommend having the map open full screen on both mobile and desktop.  Check out the feature to enable full screen on the first user interaction.

The minimum embed size we recommend is 600px*400px

Embed overlay

Mapme provides an option to add an overlay on top of the map to make it easier for users to scroll on the page where the map is embedded. Click here to learn more about the embed overlay.

Test your Map Embed

We have created a tool that allows you to easily test your map embed. Simply enter the map URL and the size of the embed, and you can preview what your map embed will look like. Check it out.

Set the Size of the Map Embed Area

The embed code includes default width and height parameters. You can set different widths and heights by changing the value in the embed code.

Customize the map width

You can set the map width in the iFrame. For example use iframe-width=”90%”or iframe-width=”800px”

For most cases, the optimal value is the default iframe-width=”100%

Customize the map height

You can set the map height in the iFrame. For example use style=”min-height: 80vh; max-height: 80vh;

Full page embed

For the optimal user experience, we recommend embedding your map full-page. Check out this example where the map opens full-page.

If your web pages always include elements such as navigation menus and footer, you can have the map fill the remaining area to maximize the use of space.

In the iFrame example below, replace the 85px with the height of your header and footer.

Responsive pages

Most modern website builders are generating pages that are responsive. If it is not the case, you will need to include in the web page the metatag below for the map to be responsive.

Auto-expand Map to Fullscreen

Enhance your map’s user experience by enabling the Auto-Expand Fullscreen feature. This setting allows the map to automatically open in fullscreen mode when a user first interacts with it, providing an immersive experience. It is especially recommended for mobile devices but can also significantly improve usability on desktops.

Benefits:

• On mobile devices, the fullscreen view creates an app-like experience.
• On desktops, it helps users focus on the map without distractions.

You can customize when the map auto-expands to fullscreen via the editor settings. Any changes must be published to take effect.

1. Open the “Share” menu in the editor.
2. Select “Auto-Expand Map” and configure your preference.

The default setting enables fullscreen mode for mobile devices.

Important Notes:

• iPhones: Due to iOS restrictions, maps opened from an iFrame will open in a new tab when switching to fullscreen.
• URL Parameter Override: The autofs URL parameter can override the editor’s fullscreen setting. Learn more.

Open the map at a selected location or category

You can choose to open your map on a specific category or location when the map loads on your web page.

To select which location or category to open when the map loads, use the Advanced Embed Code Generator:

1. In the left menu, go to Share > Embed in a Web Page > Advanced Embedding Options.
2. Click on Open location/category
3. Select from the relevant drop-down the location or category
4. The embed code will update automatically based on your selection.

Share different versions of your map

Share different versions of your map and choose which categories will show on each version. Learn More.

Hide the Content Panel When Opening your Map

By default, the interactive map will open with the content panel visible.  There are some use cases where you might prefer to open the map with the content panel hidden on mobile, desktop, or both.
You can show or hide the content panel using the showinfo URL parameter.  Learn more.

Customize your Map Border

The embed code includes a light grey border around the map. The border is generated with the following code:
style=”border: 1px solid lightgrey; border-radius: 2px;”
If you don’t want a border, you can remove that code from the iframe.
You can also easily customize the border, for example, change the color or the width.

Embed Guide for Popular Website Builders and e-Commerce Platforms

You can find detailed instructions if your website is built with

• WordPress
• Wix
• Shopify
• Weebly
• Squarespace
• Webflow
• Notion
• SharePoint
• Nation Builder
• Curaytor
• Genial.ly