Multimap API v1.1 Example

var mapviewer, geocoder
var street, city, state, postal_code, country_code, searchbtn
var geocodestatus, message, resultsPane;
var results = new Array();
var markers = new Array();

function onLoad()
{
  //Add the map 
  mapviewer = new MultimapViewer( document.getElementById( 'mapviewer' ) );
  mapviewer.drawAndPositionMap( new MMLocation( new MMLatLon( 51.5145, -0.1085 ) ,15 ) );
  
  // Setup some references that will be useful later.
     street = document.getElementById( 'street' );
     city = document.getElementById( 'city' )
     state = document.getElementById( 'state' );
     postal_code = document.getElementById( 'postal_code' );
     country_code = document.getElementById( 'country_code' );
     searchbtn = document.getElementById( 'searchbtn' );
     geocodestatus = document.getElementById( 'geocodestatus' );
     message = document.getElementById('message');
     resultsPane = document.getElementById('resultsPane');
     
  //Create a new geocoder object specifying a callback function
     geocoder = new MMGeocoder(processResults);
  
  // 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 );
          }
        }
     });
}

  function callGeocoder()
  {
     // create a new address object
     var address = new MMAddress();
     address.street = street.value;
     address.city = city.value;
     address.state = state.value;
     address.postal_code = postal_code.value;
     address.country_code = country_code.value;
    
     // clear any existing items from previous geocoding requests
     cleanUp();
     
     // inform the user a geocode is occuring
     updateGeocodeStatus('startGeocode');
     
     // perform the geocode
     geocoder.geocode(address);
  }

  function processResults() {
  // callback function registered with the Geocoder to handle geocoding results
     // inform the user a geocode has finished
     updateGeocodeStatus('endGeocode');
     // if an error occured, inform the user
     if (geocoder.error_code && geocoder.error_code != 'MM_GEOCODE_MULTIPLE_MATCHES') {
        message.innerHTML = 'We\'re sorry, the following error occured:<B>' + geocoder.error_code + '</B>';
        return false;
     }
     results = geocoder.result_set;
     var ol = document.createElement('ol');
     
     //loop through the result set
     for (var count=0; count < results.length && count < 10; count++) {
        var address = results[count].address;
        var li = document.createElement('li');
        //add a link for each result
        var anchor = document.createElement('a');

        anchor.href = '#';
        anchor.result_count = count;
        anchor.onclick = function () { moveToResult(this.result_count); return false; };
        anchor.appendChild(document.createTextNode(address.display_name));
        li.appendChild(anchor);
        ol.appendChild(li);
        
        //add a marker for each result
        var icon = MM_DEFAULT_ICON.copy();
        icon.image = 'http://www.multimap.com/share/mapviewer/i/q4/sm-marker'+(count+1)+'.png';
        var marker = mapviewer.createMarker(results[count],address.display_name,icon);
        //add an infobox for each result
        marker.infobox_html = address.display_name;
        markers.push(marker);
     }
     
     resultsPane.appendChild(ol);
     resultsPane.style.display = 'block';

     //display all the results
     var location = mapviewer.getAutoScaleLocation( markers );
     if( location.zoom_factor > 17 )
        location.zoom_factor = 17;
     mapviewer.goToPosition( location );
  }
  
  function moveToResult (count) {
     //move the map specified location and open the infobox
     mapviewer.goToPosition(results[count]);
     markers[count].openInfoBox(markers[count].infobox_html);
  }
             
  function cleanUp() {
     // Clean up the HTML containers
     message.innerHTML = '';
     while (resultsPane.firstChild) {
        resultsPane.removeChild(resultsPane.firstChild);
     }
     //remove any markers
     mapviewer.removeAllOverlays();
     markers = new Array();
  }
     
  function updateGeocodeStatus( type )
  {
     if( type == 'startGeocode' ) {
        // if the geocode is starting, disable the form inputs and inform the user
        geocodestatus.style.display = 'inline';
        disableFields(true);
     } else {
        // if the geocode is ending, enable the form inputs and inform the user
        geocodestatus.style.display = 'none';
        disableFields(false);
     }
  }
  
  function disableFields( bool )
  {
     // disable the user inout fields
     street.disabled = bool;
     city.disabled = bool;
     state.disabled = bool;
     postal_code.disabled = bool;
     country_code.disabled = bool;
  }

MMAttachEvent( window, 'load', onLoad );