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.

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&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.

eg.

<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>

Known issues

  • 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

Was this helpful?

Yes No
You indicated this topic was not helpful to you ...
Could you please leave a comment telling us why? Thank you!
Thanks for your feedback.