Multimap API V1.2 JavaScript Example

Context Menu Example *new*

The Options topic demonstrated how to enable and disable the Context Menu on your map. This example shows how you can also determine which options appear when a user clicks on a map for which the Context Menu has been activated.

The default Context Menu items are "Zoom in", "Zoom out" and "Move map". You can remove these default items or add new items to the Context Menu.

For information of the default settings for the Multimap API, please read the release notes.

Function(s) introduced:

MMMenuWidget: addItemsJSON() *updated*

What You Should See

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

1. When you right-click on the map, the Context Menu appears on the map showing its three default items.
2. When you click on the "Add new item..." link, then right-click on the map, the Context Menu appears on the map showing the extra item "Add marker". Clicking on this item adds a marker to the map.
3. When you click on the "Remove item..." link, then right-click on the map, the Context Menu appears on the map showing only the three default items again.

The Map

	Add new item to Context Menu Remove item from Context Menu Get directions: Choose Starting Point: Newton, MA Framingham, MA, Choose Ending Point: Boston, MA Cambridge, MA, Add Optional Waypoint: n/a Waltham, MA Braintree, MA, Add Optional Waypoint: n/a Lexington, MA Quincy, MA,
Messages and results will be placed here

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...

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://clients.multimap.com/share/documentation/api/1.2/classes/.

Back to examples.