v7 Map Embedding Guide and Code Generator

(July 2015)

The latest version of can be embedded into your website and customised in many different ways to show the information that is important to your users.

We have made it really simple for your web teams to do this.

The Embedding Code Generator Tool enables any web technician to configure the map, including the map area, the information layers which are activated by default and those that are off when the map loads, etc.

Once the parameters have been selected, click on “UPDATE MY CODE” and the code you need to add to your webpage is then generated for you.

You can embed the map in more than one web page. For example, you might have a map of road closures, diversions and high impact roadworks on your travel and traffic page, a map just showing the roadworks on your highway maintenance page and a map of winter gritting routes in the winter maintenance section.

Also, by embedding the latest map version, you can also take advantage of Google Analytics. After you have added the relevant code to your website, you can track usage data specific to the settings on your embed configuration.

The code generator can be found at

Prerequisites and Mandatory Information


In order to run the Embedding Code Generator Tool and embed into your website successfully, you will need to have the following

  • Organisation ID – the unique identifier for your organisation provided by Elgin
  • Embed ID – the Elgin identifier that provides access to the correct content
  • Google API Key – the key that enables you to display the Google Map

If you need an Organisation ID and/or Embed ID then please contact

Information on how to obtain a Google API key can be found here.

Although there are already default dimensions, you can also change

  • Embedded-App Container Width
  • Embedded-App Container Height

You can also include the container’s sizing parameters in your code if required.

Non-Mandatory Information Options


The use of the Non-Mandatory fields allows you to specify exactly what should be displayed on the map to meet your individual requirements.

  • Breaking News Widget Ref – is an identifier provided by Elgin to enable you to create news items and then display them on the embedded map
  • System Callback function – allows the web page to call a different function when the map has loaded
  • Include no-script information – provides a message that the browser does not support loading script
  • System delayed load – enables the map to be loaded once the rest of the page has been loaded
  • Starting position on the map – this is the map location when a visitor lands on the embedded map web page. This can be defined by Positioning the Map, Map Region, Map Coordinates, or you can choose not to define this (however this last option is not recommended)
  • Hidden Layer Groups – Layer Groups selected here will not be seen as options to select when a user customises the map
  • Layer Usage – defines what can be seen in a Layer Group (available), not seen in the group (hidden) and those layers that will be on when selected to be seen on the map by default (active)

Generating the Code

Once the parameters have been selected, simply click on “UPDATE MY CODE” and the code you need to add to your webpage is then generated.

Embedding the code on your webpage

Embedding is very simple and fundamentally consists of four things:

The page must conform to HTML standards and be well formed

  • placing a div on the page with a specific ID and class;
  • placing a script tag on the page to get the loader from the Elgin servers;
  • calling that loader from JavaScript with the right parameters.

The div


Get the Loader


Please note that the script should be run once the page has been loaded there are two ways to do this:

  1. Place the script tag at the end of the page just before the closing body tag. (This is the preferred way to do it however if your CMS restricts your access to specific parts of the page then you can use option 2)
  2. Use the parameter system.delayedLoad to cause the loader to wait until the page is loaded before running.

<a name=”js”></a>

JavaScript will only work if JavaScript is enabled so we also recommend a noscript tag to inform users with JavaScript turned off that they need to turn it on or use a browser that is JavaScript capable. Here is an example noscript tag:


<a name=”thediv”></a>

The Div

The Div is where the application is loaded. It is up to you to determine the size of the div and how it sits within the rest of your page content and how it is resized when the browser window is resized. However we would recommend you give it the largest size possible as the application tends to be easier to use with a larger window.

Further Support

If you need more information on embedding into your website, please email

John Carpenter House
John Carpenter Street