Multimap API v1.1 : Markers Example

This example demonstrates markers. These are small images overlaid on a map to indicate something of interest at a location. Markers may be customized by developers by using a different image.

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, at zoom factor 15. When you click on the first link, a marker is added to the center of the map using the default image. When you click on the second link, a marker is added to the center of the map using an alternative image. You can drag the map and make further clicks to add more markers to other parts of the map. Clicking on the third link removes all markers.

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.1/demo"></script>

The body code


<!-- The Multimap Map -->
<div id="mapviewer" style="width : 500px; height : 420px;"></div>

<!-- The Marker Links -->
<p><a href="#" onclick="addMarker(); return false;">Add Marker</a></p>
<p><a href="#" onclick="addFootballMarker(); return false;">Add Football Marker</a></p>
<p><a href="#" onclick="mapviewer.removeAllOverlays( ); return false;">Remove all overlays</a></p>

The JavaScript code


var mapviewer;

function onLoad()
{
  //Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 15 ) );
}

function addMarker( icon )
{
  // Add a marker with the specified properties
  // If no arguments are given, the default marker will be used
  mapviewer.createMarker( mapviewer.getCurrentPosition(), "Test Marker", icon );
}

function addFootballMarker()
{
  var icon = new MMIcon( 'http://www.multimap.com/share/mapviewer/i/football.png' );
  icon.iconSize = new MMDimensions( 45, 75 );
  icon.iconAnchor = new MMPoint( 22, 75 );
  addMarker( icon );
}
 
MMAttachEvent( window, 'load', onLoad );

Further Help

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

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 7777
United States, Boston	+ 1 617 423 4510
email:	info@multimap.com

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

Multimap API v1.1 Example