Basic usage

Description

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.

Create map

<!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>

Create map on demand

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 use of connection options

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>

Change map size

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>

Disabling interaction options

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>

Determining the user's location

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>