Multimap API V1.2 JavaScript Example

The Multimap API allows you to add static maps as well as draggable maps to your implementations. You may wish to display a static map as a "fallback" for those users whose browser configuration is not supported by the Multimap API. This topic presents a recommended approach for implementing this functionality.

Separate documentation on the Multimap API V1.2 Static Maps web service module is also available.

The Approach

For non JavaScript browsers, or for users with JavaScript disabled, the browser simply displays the contents of the <noscript> element without executing any JavaScript at all.

If JavaScript is enabled, the <noscript> element is ignored by the browser. The user's browser is then tested using the MMIsSupportedBrowser() function. If this tests positive then it is possible to proceed and create the map viewer. If the test is negative, the JavaScript searches for the <noscript> element inside the map viewer and copies the content into its parent node so that it is rendered by the browser. Using this approach, no request is made for a static map unless it is required.

Please note Multimap's recommended limits on map size (in pixels):

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

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

Add a <noscript> element inside the map viewer <div>. This content is written to the document if the browser does not support the Multimap API.

<div id="MultimapViewer" style="height:410px;width:700px;">
<noscript>
<img src="http://clients.multimap.com/API/map/1.2/[api_key]?width=700&height=410&lon_1=-71.0717&marker_1=none
&lat_1=42.3508&zoomFactor=13" />
<a href="http://clients.multimap.com/about/legal_and_copyright/">Terms of use</a>
<div id="widget">Widget</div>
</noscript> 
</div>

The JavaScript code

function onLoad() {
        var map_node = document.getElementById('MultimapViewer');
        if ( MMIsSupportedBrowser() ) {
            var map = MMFactory.createViewer( map_node );
            map.goToPosition(new MMLatLon( 42.3508, -71.0717 ));
        } else {
            var ns = mapviewer_node.getElementsByTagName('noscript')[0];
            mapviewer_node.innerHTML = ns.innerHTML;
            return true;
        }
}

MMAttachEvent( window, 'load', drawMap );  

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

Top of page

Multimap API V1.2 JavaScript >> Multimap API V1.2 Static Maps Documentation