Multimap API V1.2 JavaScript Example

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 to a particular release of the API, for example, Version 1.2, use this URL:

http://clients.multimap.com/API/maps/1.2/[api_key]

We recommend that you use this method, especially when linking to the API from your live applications. This ensures that your code will not break if our API changes, but it does mean that you may not have the latest features in your viewer. We also recommend that you update your website regularly to ensure that it remains connected to the correct version of the API.

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

Alternatively you can link directly to the most recent version of the API; to do so, use this URL:

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

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

Please note that Multimap's recommended limits on draggable map size are:

• a maximum of 2000x2000 pixels; and
• a minimum of 100x100 pixels.

Please note that the Multimap API does not currently support SSL protocols: you should always use http:// instead of https:// when loading the API.

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

For information of the default settings for the Multimap API, please read the release notes.

Function(s) introduced:

MultimapViewer: goToPosition()

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Boston, Massachusetts, USA.

The Map

The Code

There are three parts to the code below. The first is the line that links to the Multimap API. 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

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

The body code

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://clients.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.