Multimap API v1.1 : Basic Info Box Example

This example explains how to add info boxes to a map. Info boxes are small information windows that show up on the map to give information about a location. For instance, they might give prices for a car park that has been marked on the map, or a picture of a house that is for sale.

Info boxes expand to fit the content within but take the smallest width possible, so you may find that you need to use the CSS rule "white-space : nowrap;", non-breaking spaces, or an image, to force an acceptable width.

For more information on how to more radically change the appearance of info boxes, please see the Re-styled Info Box page.

If you want to learn about connecting info boxes to markers, you will find an example of this on the Info boxes above markers page.

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 the viewer opens a basic info box on Fleet Street, moving the map so that the info box is fully visible, if necessary. When you click on the second link the viewer opens an info box at the current center of the map. This info box contains an image and a HTML form; submitting this form results in a JavaScript message popping up. Clicking on the third link results in the info box being removed from the map. (Info boxes that are no longer visible will still be removed so that they do not become visible again as the map is moved.)

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 Multimap Map -->
<div id="mapviewer" style="width : 500px; height : 420px;"></div>

<!-- The Info Box Links -->
<p><a href="#" onclick="firstInfoBox(); return false;">Open Basic Info Box</a></p>
<p><a href="#" onclick="secondInfoBox(); return false;">Open Larger Info Box</a></p>
<p><a href="#" onclick="mapviewer.removeAllOverlays(); return false;">Remove All Info Boxes</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 firstInfoBox()
{
  // Only ever show one info box of each type, by removing the previous
  // one if there is one
  var html = "<h2>Hello&nbsp;World!</h2><p>Welcome to the Multimap API</p>";
  mapviewer.createInfoBox( new MMLatLon( 51.5145, -0.1085 ), html );
}

function secondInfoBox()
{
  // Only ever show one info box of each type, by removing the previous
  // one if there is one
  var pos = mapviewer.getCurrentPosition();
  var html = "<img src='http://www.multimap.com/share/mapviewer/i/multimap-logo.gif' ";
  html += "width='157' height='28' alt='multimap.com'/>\n";
  html += "<form onsubmit='var l=document.getElementById( \"local\" );";
  html += " alert( \"You want information about: \"+l.options[l.selectedIndex].firstChild.nodeValue );";
  html += " return false;' method='get' action='http://www.multimap.com/map/browse.cgi'>\n";
  html += "<select id='local' name='local' size='1'>";
  html += "<option value='-1'>---</option>";
  html += "<option value='ents'>Bars, Pubs &amp; Clubs</option>";
  html += "<option value='auto'>Car Parks</option>";
  html += "<option value='rp'>Properties for Sale</option>"
  html += "<option value='accom'>Hotels</option></select>";
  html += "<input type='hidden' name='place' value='Centre of Multimap API Example'>";
  html += "<input type='hidden' name='width' value='500'>";
  html += "<input type='hidden' name='height' value='300'>";
  html += "<input type='hidden' name='pc' value=''>";
  html += "<input type='hidden' name='kw' value=''>";
  html += "<input type='submit' value='Go'/>";
  html += "</form>";
  mapviewer.createInfoBox( mapviewer.getCurrentPosition(), html );
}

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