Multimap API v1.1 : Info boxes above markers

This example shows how to display an info box above a marker when a user clicks on the marker. It combines the marker and info box methods with the event-handling system.

What You Should See

If you view this in your browser you should see ten markers at random locations on the map, each with an info box which is displayed when the marker is clicked.

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

The body code

The JavaScript code

function onLoad() {
  //Add the map 
  var mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ));
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 15 ) );
          
  //Add the Small Pan Zoom Widget 
  mapviewer.addWidget( new MMSmallPanZoomWidget(), 'smallZoom' ); 
  
  // Add an Event Handler to show info boxes when the markers are clicked
  mapviewer.addEventHandler( 'click', function( type, target, point )
  {
     if( ! point && target.infobox_html )
     {
        if( target.infoBoxOpened() )
        {
          target.closeInfoBox();
        }
        else
        {
          target.openInfoBox( target.infobox_html );
        }
     }
  });
  
  //Add a marker to the map at the specified point, and attach an info box showing a number
  function createMarker(location, number) {
     var marker = mapviewer.createMarker(location);
     marker.infobox_html = "Marker #" + number + " was clicked.";
  }
  
  //Add a marker to the map at the specified point, and attach an info box showing a number
  function createMarker(location, number) {
     var icon = MM_DEFAULT_ICON.copy();
     icon.image = 'http://www.multimap.com/share/mapviewer/i/q4/sm-marker'+(i+1)+'.png';
     var marker = mapviewer.createMarker(location, "Marker #" + number, icon);
     marker.infobox_html = "Marker #" + number + " was clicked";
  }

  // Add 10 markers to the map at random locations
  var bounds = mapviewer.getMapBounds();
  var lonSpan = bounds.getNorthEast().lon - bounds.getSouthWest().lon;
  var latSpan = bounds.getNorthEast().lat - bounds.getSouthWest().lat;

  for (var i = 0; i < 10; i++) {
     createMarker(
        new MMLatLon(
          bounds.getSouthWest().lat + (latSpan * Math.random()),
          bounds.getSouthWest().lon + (lonSpan * Math.random())), 
          i + 1);
  }
}
        
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