Map embedding allows you to embed a map in your website or blog. To access the embed code, open the map editor and click on the SHARE MAP panel on your administration sidebar to get the iframe embed code for your map.
Embed types
Inline Embed
An inline embed is the most versatile of all the embedding options, it allows the your map to be embedded into a website using an iframe.
This form of embedding is supported by almost all blogs and content management systems.
Email Embed (can also be used on website or blog)
The email embed displays a thumbnail of the map in the email which when clicked opens up your map in a new browser tab. The email embed can also be used in blogs or website and has the same behavior as when used in an email.
For email embed to work your email client must allow HTML to be inserted into your emails. If your email client doesn’t support HTML you can right-click on the preview thumbnail, save it and insert it into your email as an image then add a link to the image that points to your map.
Popup Embed
Popup embed shows a preview image of your map, when the image is click a popup window appears on screen containing a fully interactive version of your map.
Popup embed requires that the page you are inserting the code can load internal JavaScript, this means that it won’t work on most blogs and content management systems. Please speak to your web designer about using this type of embed on your website.
Embedding your map in Wordpress or other CMS
Mango maps can be embedded in just about any website or blog, as long as the platform allows <iframe> embed codes.
Using either the inline embed or popup embed code, simply open your post or page editor in your CMS, then switch to HTML or TEXT view and paste in your embed code.
<iframe src="//mangomap.com/maps/2134?preview=true" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="800" height="600"></iframe>
You can adjust the width and height by entering your own dimensions that best suit your website.
Custom domains
If you are using your own domain with your Mango account, you must replace mangomap.com with your own domain in the embed code. eg.
<iframe src="https://{ your full custom domain }/maps/2134?preview=true" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="800" height="600"></iframe>
SSL and embeds
If you are using a custom domain, please note that Mango’s SSL certificate does not transfer across to your domain. Instead, we generate an SSL certificate specifically for your domain when you enable custom domain, so that your maps can be embedded securely.
Known issues
- Wordpress.com does not allow <iframe> tags, so Mango maps cannot be embedded on any wordpress.com blog. The self-hosted wordpress.org platform allows <iframe> embedding.
- Embeds using a percentage value for the width – eg. width="100%" – do not display correctly on iOS for iPhones and iPads. Fixed pixel widths display correctly.
- Password protected maps may exhibit session issues if the host page is reloaded.