Find more Examples here

Asynchronous Loading (Map-API)

Version reduced to minimal set of HTML Read Example Description

Description

This example is based on the simple map example. The only difference is that the outdooractive API is loaded asynchronously after the page is loaded and rendered. It helps to improve user experience as the web page is available faster as it’s not blocked by loading and parsing the APIs. The APIs may be loaded asynchronously after page load (like this example does) or even after user interaction (e.g. if the map is opened inside a lightbox or js/css tab).

function initOA() {
    var map;
    
    // call the outdooractive maps api initialization method with a callback function
    oa.api.maps(
        function (oamaps, gm) {
    
    	// list all outdooractive maps you want to enable
    	var mapTypeIds = [
    	    'oa_map',
    	    'oa_map_winter',
    	    'oa_osm'
    	];
    
            
    
    	// set map center, zoom level, map types and more
    	var config = {
                center : new gm.LatLng( 47.54687, 10.2928 ),
                zoom : 10,
                mapTypeId : mapTypeIds[ 0 ],
                mapTypeControlOptions : { mapTypeIds: mapTypeIds }
            };
    
    	// instatiate a new outdooractive map
    	// params: dom id of map canvas div, configuration object
    	map = oamaps.map( document.getElementById("map_canvas"), config );
    });
}

The event window.load calls the function loadScripts() that loads the Outdooractive javascript API by adding script-tags to the html dom.

The jsonp callback of the outdooractive javascript API script tag’s url is set to initOA. The callback function initOA() calls the the outdooractive maps api initialization method oa.api.maps() that receives a function instantiating the final map.