1. Home
  2. Knowledge Base
  3. Sharing your Maps
  4. The Embed Guide

The Embed Guide

You can easily embed your interactive maps in virtually any type of website, for example, WordPress, Wix, Weebly, and Squarespace.

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

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

Embed Overlay

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.

 map-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”.

Fullscreen

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.

custom-map-start-url

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>

We replaced width=”100%” with style=”height: 100vh;”

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>

You can find detailed instructions if your website is built with

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.

Related Articles