Asynchronous Loading
By default the map loads synchronously.
In this example:
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="container"></div>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
</script>
Any execution process will be stopped while the script https://mapgl.2gis.com/api/js/v1 is not loaded.
To load the script asynchronously, you can add async and defer attributes to the script tag and specify a global function name which will execute after the script loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of an async script loading" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
function initMap() {
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
}
</script>
<script src="https://mapgl.2gis.com/api/js/v1?callback=initMap" async defer></script>
</body>
</html>