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) {
// 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 );
});
}
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.