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) {
// set map center, zoom level, map types and more
var config = {
center : { lat: 47.54687, lng: 10.2928 },
zoom : 10,
mapInit : {
basemap: "osm",
style: "winter",
overlay: "slope"
}
};
// instatiate a new outdooractive map
// params: dom id of map canvas div, configuration object
map = oamaps.map( "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', "https://api-oa.com/jscr/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.