Examples | MapJS API | 2GIS Documentation

Basic usage

The following are examples of the basic usage of the map. For more information about the work with the map use the Connect API and Map documentation sections.

<!DOCTYPE html>
<html>

<head>
    <title>Map creation</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        DG.then(function () {
            DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });
        });
    </script>
</body>

</html>

Map initialization on demand (useful when displaying the map in a popup window):

<!DOCTYPE html>
<html>

<head>
    <title>Create map on demand</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js?lazy=true"></script>
    <style>
        html,
        body,
        #mapBlock,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <input id="create" type="button" value="Display map" />
    <div id="mapBlock"></div>
    <script>
        var createButton = document.getElementById('create');
        createButton.onclick = function () {
            var container = document.createElement('div'),
                mapBlock = document.getElementById('mapBlock');
            container.id = 'map';
            mapBlock.appendChild(container);
            createButton.style.display = 'none';
            DG.then(function () {
                DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13
                });
            });
        }
    </script>
</body>

</html>

The following is an example of calling the map with the following set of options: pkg=basic, skin=light. As the result we get a build with basic functionality in the light theme. All options can be viewed in the Connection Options section.

<!DOCTYPE html>
<html>

<head>
    <title>Использование опций подключения</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=basic&skin=light"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        DG.then(function () {
            DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });
        });
    </script>
</body>

</html>

When you click the button, the size of the container changes and the map adjusts to the new size:

<!DOCTYPE html>
<html>

<head>
    <title>Change map size</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }

        #changeSize {
            position: absolute;
            top: 5px;
            left: 70px;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <input id="changeSize" type="button" value="Change size" />
    <script>
        var changeSizeButton = document.getElementById('changeSize');
        DG.then(function () {
            var map,
                enabled = false;
            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 15,
                animate: true
            });
            changeSizeButton.onclick = function () {
                enabled = !enabled;
                var mapDiv = document.getElementById('map');
                mapDiv.style.width = (enabled ? '50' : '100') + '%';
                // map update
                map.invalidateSize();
            }
        });
    </script>
</body>

</html>

Example of static map display:

<!DOCTYPE html>
<html>

<head>
    <title>Disabling interaction options</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        DG.then(function () {
            DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13,
                dragging: false,
                touchZoom: false,
                scrollWheelZoom: false,
                doubleClickZoom: false,
                boxZoom: false,
                geoclicker: false,
                zoomControl: false,
                fullscreenControl: false
            });
        });
    </script>
</body>

</html>

An example of determining the user's geographic location:

<!DOCTYPE html>
<html>

<head>
    <title>Determination of user's location</title>
    <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script>
        DG.then(function () {
            var map;
            map = DG.map('map', {
                center: [54.98, 82.89],
                zoom: 13
            });
            map.locate({ setView: true, watch: true })
                .on('locationfound', function (e) {
                    DG.marker([e.latitude, e.longitude]).addTo(map);
                })
                .on('locationerror', function (e) {
                    DG.popup()
                        .setLatLng(map.getCenter())
                        .setContent('Location access denied')
                        .openOn(map);
                });
        });
    </script>
</body>

</html>