Multimap API v1.1 Example

Introduction

This example gives you an overview of how to design a page to incorporate a simple map. It does not describe the JavaScript used, but ensures you know how to link to the API correctly and how to set your page up to include an interactive map.

Firstly, you need to include a link to the Multimap API. There are two ways in which you can link to the API. To link directly to the most recent version use this URL:

http://clients.multimap.com/API/maps/[clientname]

Please note that you must replace [clientname] with your service client name as assigned by Multimap.

Alternatively you can link to a particular release of the API. This ensures that your code will not break if our API changes, but does mean that you may not have the latest features in your viewer. Use a URL such as the following to do this:

http://clients.multimap.com/API/maps/1.1/[clientname]

Once you have linked to the API, you will need to make sure that there is a suitable location in the HTML code to receive the map. This will usually be a DIV that you have styled to be in the correct size and location. You should also assign an identifier to the container so that you can easily retrieve a reference to it in your JavaScript.

It is good practice to use UTF-8 encoding on your page, but it is also a pre-requisite for using other Multimap API modules such as the Geocoding API. Enabling UTF-8 can be done with the following header in your HTML:

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Fleet Street, London, Great Britain.

The Map

The Code

There are three parts to the code below. The second is an example of the HTML you must have in your page. The third is an example of the JavaScript required to implement the page.

The header code

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<script type="text/javascript" src="http://clients.multimap.com/API/maps/1.1/demo"></script>

The body code


<div id="mapviewer" style="width : 500px; height : 420px;"></div>

The JavaScript code


var mapviewer;

function onLoad()
{ 
  //Add the map
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );

  mapviewer.drawAndPositionMap( new MMLatLon( 51.5145, -0.1085 ) );
}

MMAttachEvent( window, 'load', onLoad );

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://www.multimap.com/share/mapviewerapidocs/1.1/index.html.

Further Help

If you require further help with your map API implementation, please contact our Customer Support team:

Australia, Sydney + 61 (0) 2 9262 6551
Great Britain, London +44 (0)20 7632 7777
United States, Boston + 1 617 423 4510
email: info@multimap.com

For general account enquiries or further services, please contact your Multimap Sales team:

Australia, Sydney + 61 (0) 2 9262 6551
Great Britain, London +44 (0)20 7632 7800
United States, Boston + 1 617 423 4510
email: sales@multimap.com