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.
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 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.
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&embed=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 domain users
If you are using your own domain with your Mango account, you must replace
mangomap.com with your own domain in the embed code.
<iframe src="//custom-domain.com/maps/2134?preview=true&embed=true" allowtransparency="true" frameborder="0" scrolling="no" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="800" height="600"></iframe>
- Wordpress.com does not allow <iframe> tags, so Mango maps cannot be embedded on any wordpress.com blog. Wordpress.org 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.
Need more help with this?
✉ Email the Mango support team