Find more Examples here

Asynchronous Loading: On User Interaction (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 Outdooractive API is loaded asynchronously on user interaction. The Outdooractive JavaScript API is only loaded and initialized if a user “opens” the map on this page.

This may be the case if the map is placed in a hidden div container that implements e.g. a tabbed GUI or a lightbox.

See our map async example to learn how the APIs may be loaded after page load.

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 );
    });
}

function loadScripts() {

    var documentHead = document.head  ||  document.getElementsByTagName('head')[0];

    // load outdooractive javascript API
    var element = document.createElement('script');

    element.setAttribute('type', 'text/javascript');
    element.setAttribute('src',  "http://www.outdooractive.com/alpportal/oa_head.js?proj=api-dev-oa&key=yourtest-outdoora-ctiveapi&callback=initOA");

    documentHead.appendChild(element);
}

// create a button and add loading the scripts to the onclick event
var button = document.createElement("button");
button.innerHTML = "Click to load the Map.";
button.onclick = loadScripts;

document.getElementById("map_canvas").appendChild( button );

The function loadScripts() is called on user interaction like the onclick event of a button in this example. The APIs are loaded by adding script tags to the page’s dom like our map async example does. The outdooractive javascript API callback function initOAX() calls the the outdooractive maps api initialization method oax.api.maps() that receives a function instantiating the final map.