index.html

<!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="Quckstart with 2GIS Map API" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            const script = document.createElement('script');
            script.onload = function () {
                const mapgl = window.mapgl;
                const map = new mapgl.Map('container', {
                    center: [55.31878, 25.23584],
                    zoom: 13,
                    key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
                    style: 'c080bb6a-8134-4993-93a1-5b4d8c36a59b',
                });
                const marker = new mapgl.Marker(map, {
                    coordinates: [55.31878, 25.23584],
                });
            }

            script.src = new URL(window.location.href).searchParams.get('apiUrl') ?? 'http://mapgl.2gis.com/api/js/v1';
            document.body.appendChild(script);
        </script>
    </body>
</html>