Multimap API V1.2 JavaScript Example

Marker and Info Box Example

Markers

This example demonstrates markers. These are small images overlaid on a map to indicate something of interest at a location. Markers may be customized by developers by using a different image.

Calculating distances between markers *new*

The Multimap API now allows you to calculate the distance between points or markers by using the getGreatCircleDistance() method.

Info boxes

This example explains how to add info boxes to a marker. 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.

Tabbed info boxes *new*

The Multimap API now allows you to create tabbed info boxes; this example shows how to effect this.

Info boxes can also be re-styled to change their appearance. For more information, please see the Re-styled Info Box page.

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. It also demonstrates how to add a text overlay on top of a marker.

Function(s) introduced:

MultimapViewer: createMarker() *updated*, getCurrentPosition(), getGreatCircleDistance() *new*, MMInfoBoxTab() *new*, openInfoBox() *new*, removeAllOverlays(), setInfoBoxContent() *new*

What You Should See

If you view this in your browser you should see a Multimap draggable map centered on Saint James Avenue, Boston, Massachusetts, USA, at zoom factor 15.

• When you click on the "Add default marker" link, a marker is added to the center of the map using the default image.
• When you click on the "Add customized marker" link, a marker is added to the center of the map using an alternative image.
• When you click on the "Add inert marker" link, a marker is added to the center of the map using the default image. An inert marker differs from a standard marker in that it does not receive click events and is not raised to the top of the viewer when clicked.
• When you click on the "Add draggable marker with tabbed info box" link, a marker is added to the center of the map using the default image. The viewer also opens an info box at the current center of the map. This info box contains several tabs, each of which can hold separate content. (When you add a draggable marker to your map, the act of dragging moves the marker instead of the map, minimizing the info box at the same time. To restore the info box to normal size, click on the marker again.)
• When you click on the "Add customized marker at..." link, you should see five markers at random locations on the map, each with an info box which is displayed when the marker is clicked.
• Clicking on the "Remove all overlays" link removes all markers and info boxes. (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

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

The body code

Sorry, JavaScript required...

Sorry, JavaScript required...

The JavaScript code

Sorry, JavaScript required...

For more information on the subject of Multimap API JavaScript code, please read the API documentation at: http://www.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.

Further Help

If you require further help with your map API implementation, please contact the Multimap Customer Support team:

For general account enquiries or further services, please contact the Multimap Sales team: