The Embed Guide
The display of the embedded map adapts itself automatically based on the space available. It is fully responsive on all screens, desktop, tablet, and mobile.
The Mapme embed code uses a standard iframe which can easily be customized to integrate your map on your website the way you want it.
- Embed map best practices
- Set the size of the embed area
- Enable fullscreen
- Open your map on a specific category or location
- Hide the content panel when opening your map
- Customize your map border
- Embed your map full view port
- Embed guide for some popular Website builders and ecommerce platforms
- Iframe window events
Embed Map Best Practices
We recommend embedding your map in a space 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. See the instructions for full viewport embed.
By default, the height of the embed is set to 635px and can be easily changed.
Here is a good example of a full-width embed which integrates seamlessly in the web page.
Small Embed Area
If you have limited real-estate available in your web page, we recommend using our feature to open the map full screen on the first user interaction. The minimum embed size we recommend is 600px*400px
Mapme provides an option to add on overlay on top of the map to make it easier for users to scroll on the page where the map is embedded. Click here the learn more about the embed overlay.
Customize the Embed Code
The embed code can easily be modified to customize the behavior of the embedded map. Some of the customizations can be done on the embed code page by selecting the settings that suit your needs. Additional customization is done by editing the embed code.
Setting the size of the embed area
The embed code includes a default width and height parameters. You can set different width and height by changing the value in the embed code e.g iframe-height=”700px” iframe-width=”1000px”.
When a user first interacts with your map, you can choose to have the map open full screen. This can be useful if the map is embedded in a small area.
Note that on iOS, the map will open in a new tab since going full screen from an iFrame is not possible.
You can set the full-screen option on the first interaction with the setting on the embed code generator.
You can manually edit the embed code using the autofs parameter
autofs=1 – full screen enabled
autofs=0 – full screen disabled
Open your map with a specific category or location
You can choose to open your map on a specific category or location when the map loads on your web page.
Simply enter the URL of the category or location you would like to show when the map loads.
To find the URL of the category or locations, open the map in your browser and select the category or location.
Copy and paste the URL in the embed code generator.
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 your map full viewport
You can embed the map full viewport so that the map fills the entire space available on the page. The implementation depends on your website. Here is a code that typically works well for most sites. See this example where the map opens a full page.
<iframe width="100%" style="height: 100vh;" src="https://viewer.mapme.com/14049bfd-a81c-4a5f-8936-93d6be146ac0" frameborder="0" allowfullscreen allow="fullscreen; geolocation" scrolling="no" style="border: 1px solid lightgrey; border-radius: 2px;"></iframe>
Note that the page header needs to include the metatag below for the map to be responsive.
<head><meta name="viewport" content="initial-scale=1" /></head>
Iframe window events
In order to provide more control for embedded maps, we implemented some useful events that can be triggered on the embedded iframe through the Window.postMessage interface.
This is an advanced option which requires programming knowledge.