Embedding a map on your website

Once you have created a new map, you will want to embed that map in your own website.  This is generally done by copy-pasting an "embed code" into a page on your website.  Exactly how you do this will depend on the nature of your website and it is not possible to cover all possibilities here.  However, most websites nowadays are powered by a Content Management System (CMS) such as WordPress, Joomla, Drupal, ModX, Plone, etc.  These will all provide you with a "What You See Is What You Get" (WYSIWYG) editor for creating content pages on your website and in most cases you should be able to use the editor to add the map to a content page.  Consequently, the procedure is roughly the same in all of them, although it will inevitably differ in the details.

Step 1: Find the embed code for your map

The first step, having at least created a basic map, is to locate the embed code for it.  This can be found by following this procedure:

  • Log in to Mapamatic.
  • On the top menu, click on Components -> Map generator.  You will be shown a list of your projects.
  • Click on the title of the project of your choice.
  • On the left menu, click on Export.
  • You should see the Embed code field.

This is an example of what an Embed code looks like:

<div id="map"></div>
<script>
(function(m,a,p,t,i,c,s){m['MapamaticGO']=t;m[t]=function(){(m[t].q=m[t].q||[]).push(arguments)};s=a.getElementsByTagName(p)[0];c=a.createElement(p);
c.src='https://mapamatic.co.uk/media/com_mapgenerator/js/map.js?k=b8e45f2bb163737323bab28819280653';
c.id='mapamatic';c.onload=m[i];s.parentNode.insertBefore(c,s)})(window,document,'script','mapamatic');
</script>

Step 2: Locate the relevant page in your CMS

How you do this will vary depending on the CMS you are using.  However, the important point to note is that you will almost certainly not be able to simply paste the embed code directly in the WYSIWYG editor window.  You must instead look for a button labelled HTML or Source that will allow you enter HTML code.  In some cases, you may need to make configuration changes to your editor or your CMS in order for the embed code not be simply stripped out.  If that happens, you will need to consult your CMS documentation or contact your website administrator.
 
There are more specific instructions available if you are embedding a map on a Green Party website using the ModX CMS.

Step 3: Copy-paste the Embed code

Copy the Embed code from the Mapamatic Export screen and paste it into the CMS editor's HTML Source Edit window.  Save the page, then test it to see if you map is rendered correctly.

Troubleshooting

Important: The embed code includes a DIV for the map itself.  If you want to use your own DIV elsewhere on the web page, then you must either remove the DIV from the embed code, or use a different CSS id.