Multimap API v1.1 Example

var mapviewer, searchbtn, postcode, loading, choicessel, choices, script_tag;
var last_request_num = 0;

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

  // Add an Event Handler to allow 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 );
        }
     }
  });

  // Set up some references that will be useful later.
  loading = document.getElementById( 'loading' );
  postcode = document.getElementById( 'postcode' );
  searchbtn = document.getElementById( 'searchbtn' );
  address = document.getElementById( 'address' );
  town = document.getElementById( 'town' );
  choicessel = document.getElementById( 'choicessel' );
  choices = document.getElementById( 'choices' );

  // Call the function to set the status and make sure the form is 
  // initialized correctly.
  loadingStatus( false )
}

function loadingStatus( bool )
{
  // If loading values, disable the form elements
  // and display a spinning icon to show activity
  postcode.disabled = bool;
  searchbtn.disabled = bool;
  address.disabled = bool;
  town.disabled = bool;
  loading.style.display = bool ? 'block' : 'none';
}

function performQuery()
{
  // Make the initial places request
  var url = 'http://www.multimap.com/clients/places.cgi?client=ajaxxmlsf&db=GB&pc='+postcode.value+'&addr2='+address.value+'&addr3='+town.value+'&rt=places.json';

  choices.style.display = 'none';
  makeRequest( url );
  return false;
}

function makeRequest( url )
{
  if( script_tag && script_tag.parentNode )
     script_tag.parentNode.removeChild( script_tag );
  script_tag = document.createElement( 'script' );
  loadingStatus( true );
  last_request_num++;
  url += '&identifier='+last_request_num+'&callback=requestCallback';
  script_tag.type = 'text/javascript';
  script_tag.src = url;
  document.getElementsByTagName( 'head' )[0].appendChild( script_tag );
  return false;
}

function requestCallback( request_num, results )
{
  if( request_num != last_request_num )
  {
     // This request is no longer valid but the browser has loaded it anyway
     return;
  }
  // At this point the request has completed succesfully
  // Parse the result; it can be in one of three states
  var useful = false;
  if( Number( results.results_count ) == 1 )
  {
     // Our search found one location; submit a browse request for it
     useful = true;
     browse( results.results[0].browse_url );
  }
  else if( Number( results.results_count ) > 1 )
  {
     // Our search found more than one location; display the
     // list of choices for the user to select from
     useful = true;
     while( choicessel.childNodes.length > 0 )
     {
        choicessel.removeChild( choicessel.childNodes[0] );
     }
     var option = document.createElement( 'option' );
     option.value = '';
     option.appendChild( document.createTextNode( ' --- ' ) );
     choicessel.appendChild( option );
     for( var i = 0, l = results.results.length; i < l; ++i )
     {
        var result = results.results[i];
        if( result )
        {
          option = document.createElement( 'option' );
          option.value = result.browse_url;
          option.appendChild( document.createTextNode( result.place_name ) );
          choicessel.appendChild( option );
        }
     }
     loadingStatus( false );
     choices.style.display = 'block';
     alert( "Your search returned more than one result, please select the correct location from the drop-down box." );
  }
  else if( results.locationData )
  {
     // This was a browse request, parse the list of locations
     // that was found and display them on the map
     useful = true;
     if( results.locationData.length > 0 )
     {
        displayLocations( results.locationData );
     }
     else
     {
        alert( 'Could not find any matches for your query.' );
     }
     loadingStatus( false );
  }

  if( ! useful )
  {
     // One of our requests did not return the required information; 
     // this example does not perform any complicated checking for any reason for this.
     alert( "Couldn't find any locations for that postcode" );
     loadingStatus( false );
  }
}

function browse( filename )
{
  if( filename == '' )
     return;
  // This function performs the browse request for the given filename
  choices.style.display = 'none';
  var url = 'http://www.multimap.com/clients/'+filename;
  makeRequest( url );
}

function displayLocations( locations )
{
  // Remove all the current overlays, as we will be display a new set
  mapviewer.removeAllOverlays();
  // Display the location of points of interest that have been found.
  var points = new Array();
  for( var i = 0; i < locations.length && i < 10; ++i )
  {
     var properties = locations[i];
     if( properties.lat && properties.lon )
     {
        var html = "<h1>"+properties.name.replace(/ /g, "&nbsp;")+"</h1>";
        html += "<p>"+properties.street+"<br/>"+properties.town+"<br/>"+properties.pc+"</p>";
        if( properties.url )
        {
          if( properties.url.substring( 0, 7 ) != 'http://' )
          {
             properties.url = 'http://'+properties.url;
          }
          html += "<p><a href=\""+properties.url+"\" target=\"_blank\">Visit Website</a></p>";
        }
        var point = new MMLatLon( Number(properties.lat), Number(properties.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, properties.name, icon );
        marker.infobox_html = html;
        points.push( point );
     }
  }

  // Autoscale the map to fit the points found
  if( points.length > 0 )
  {
     var location = mapviewer.getAutoScaleLocation( points );
     mapviewer.goToPosition( location );
  }
}

MMAttachEvent( window, 'load', onLoad );