Multimap logo Multimap API V1.2 JavaScript Example

A Basic Example

This example explains and expands upon the JavaScript used in the Introduction. That example demonstrated that just a few lines of JavaScript code can be used to output a basic map viewer.

The first important code line is the MMAttachEvent line. This is a way of telling the browser that you wish a specific function, in this case the onLoad function, to be called when the page loads. This works in all browsers supported by the API.

The first line of code within the function is used to create a new map viewer and link it to the container DIV. Nothing is drawn on the screen yet, allowing you to make changes to the viewer first. You must keep a reference to this viewer, as you will use it for any operations that you wish to perform later.

The second line of code tells the map viewer to draw itself within the container. You must pass in a set of coordinates on which you wish to center the viewer. These should be passed in as latitude and longitude encapsulated within an MMLatLon object. Either you can pass the MMLatLon object directly to the goToPosition function or you can wrap it with an MMLocation object which will allow you to tell the viewer to draw the location at a different zoom factor from the default.

Callback method *new*

The Multimap API now allows you to use a 'callback method' to determine how your application responds when the API has loaded. To use this feature:

  1. Include your callback function in a URL such as
    http://clients.multimap.com/API/maps/1.2/demo?callback=myFunction
  2. Define a function that corresponds to your callback:
    function myFunction() {
  alert( 'API loaded' );
}
  3. Your callback function is called when the API has loaded.

Function(s) introduced:

MultimapViewer: goToPosition() *new*
MMFactory: createViewer() *new*

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Saint James Avenue, Boston, Massachusetts, USA, at zoom factor 15.

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.

Further Help

If you require further help with your Multimap service implementation, additional Multimap services or general account enquiries, please contact Multimap:

Sales: +44 (0)20 7632 7800
Customer Support: +44 (0)20 7632 7777
email: mminform@microsoft.com