Multimap API V1.2 JavaScript Example

This example shows the simplest way of combining the mapping and geocoding features of the Multimap API, including the use of the events startGeocode and endGeocode.

Addresses can be passed directly within any function that supports MMLocation, such as goToPosition.

mapviewer.goToPosition( 
  new MMLocation( new MMAddress( { street : '31 St James Avenue', city : 'Boston', 
        state : 'MA', postal_code : '02116', country_code : 'US'} ), 11 ) );

The event types startGeocode and endGeocode are provided to allow you to detect when the asynchronous geocoding process has started and ended.

It should be noted that this is a very basic example of using the Multimap API geocoder and should be used with great care. When used in this fashion, if the geocoder returns multiple results the map viewer will automatically select the first entry, which may not be the result the user was expecting.

If you would like to learn how to handle multiple results by working directly with the Multimap API geocoder, take a look at the Using the Multimap API Geocoder page.

The geocoder returns results in UTF-8 format. You should ensure that the encoding of your HTML page is set to UTF-8 using a header similar to the following:

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

Events used:

startGeocode, endGeocode

What You Should See

If you view this in your browser you should see a Multimap draggable map initially centered as a result of a geocoding request for an address in Boston, Massachusetts, USA, at zoom factor 15.

Links are provided to move the map to locations in London, Great Britain and Sydney, Australia, each of which is automatically generated as a result of a separate geocoding request.

The Map

Go to 31 St James Avenue, Boston, MA, 02116, US Go to 165 Fleet Street, London, EC4A 2DY, GB Go to 36 Carrington Street, Sydney, NSW, 2000, AU

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...

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.