Multimap API v1.1 Example

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

var mapviewer, loading, request;

function onLoad()

{
  // Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );

  mapviewer.addWidget( new MMSmallPanZoomWidget() );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ), 15 ) );

  // 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 );
        }
     }
  });

  loading = document.getElementById( 'loading' );
  loading.style.display = 'block';

  // Set up the request, note that we're using a relative path as
  // this will not work across domains.
  request = mapviewer.getXMLHTTPRequest();
  request.open( 'GET', 'demo.xml', true );
  request.onreadystatechange = handleXML;
  request.send(null);
}

function handleXML()
{
  if( request.readyState == 4 ) {
     loading.style.display = 'none';
     if( request.status == 200 ) {
        // For this example we're going to parse the text of the XML that
        // comes back as an example, but the browser should parse it
        // anyway and place it in request.responseXML if the file is
        // correctly served with an application/xml mime type.
        var xmlText = request.responseText;
        var xmlDoc = mapviewer.parseXML( xmlText );
        var markers = xmlDoc.documentElement.getElementsByTagName( "location" );
        var points = []
        for( var i = 0; i < markers.length && i < 10; ++i ) {
          var point = new MMLatLon(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lon")) );
          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( point, markers[i].getAttribute( "title" ), icon );
          marker.infobox_html = markers[i].getAttribute( "title" );
          points.push( point );
        }
        var location = mapviewer.getAutoScaleLocation( points );
        mapviewer.goToPosition( location );
     } else {
        alert( "There was a problem making the XML request." );
     }
  }
}

MMAttachEvent( window, 'load', onLoad );