Multimap Open API V1.2 JavaScript Example

The Multimap Open 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 Open API. This topic presents a recommended approach for implementing this functionality.

Separate documentation on the Multimap Open API V1.2 Static Maps 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.

The JavaScript

function onLoad() {
        var map_node = document.getElementById('MultimapViewer');
        if ( MMIsSupportedBrowser() ) {
            var map = new MultimapViewer( 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;
        }
}

The HTML

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

<div id="MultimapViewer" style="height:410px;width:700px;">
<noscript>
<img src="http://developer.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://www.multimap.com/static/condit_new.htm">Terms of use</a>
<div id="widget">Widget</div>
</noscript> 
</div>

The map

Top of page

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

Further Help

If you require further help with your Multimap Open API implementation, please visit the Multimap Developer Forums.

For Open API news, announcements and other information, please see our blog.

For enquiries about further Multimap services, please contact the Multimap Sales team: