Overview | MapJS API | 2GIS Documentation

General information

With maps API you can:

  • create interactive maps on the web page;
  • display various objects on the map (markers, pop-ups, geometric objects);
  • search on the map: to determine the coordinates of geoobjects by their names and the names by the coordinates.

The source code of the maps API is available on GitHub, the project is open to suggestions and pull-requests.

The following is a simple example of creating a map.

To connect API JavaScript code, add the following code to the head section of the HTML page:

<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>

If you are interested in including the API code using npm, go to the Connection API section.

To create a container in which the map will be displayed, you must add a block HTML element of the required size:

<body>
    <div id="map" style="width:500px; height:400px"></div>
</body>

Now everything is prepared for the map creation. To do this, add the following code to the head section:

<script type="text/javascript">
    var map;

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

In this example map takes two parameters:

  • center - the coordinates of the center of the map in the following format [latitude, longitude];
  • zoom - the scale factor in the range from 1 to 18.

After creating the map you can display a marker on it by adding one line of the code to the previously written one:

<script type="text/javascript">
    var map;

    DG.then(function() {
        map = DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13,
        });

        DG.marker([54.98, 82.89]).addTo(map);
    });
</script>

If to extend a little the above added string of the code with a marker, then when clicking on the marker, a popup will be displayed (pop up block) with the information you need:

<script type="text/javascript">
    var map;

    DG.then(function () {
        map = DG.map('map', {
            center: [54.98, 82.89],
            zoom: 13
        });

        DG.marker([54.98, 82.89]).addTo(map).bindPopup('You've clicked on me!');
    });
</script>

Resulting code:

<!DOCTYPE html>
<html>
    <head>
        <title>API карт 2ГИС</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script>
        <script type="text/javascript">
            var map;

            DG.then(function() {
                map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 13,
                });

                DG.marker([54.98, 82.89])
                    .addTo(map)
                    .bindPopup('You have clicked on me!');
            });
        </script>
    </head>
    <body>
        <div id="map" style="width:500px; height:400px"></div>
    </body>
</html>

Was everything successful? Now you can see the developer guide and examples of use.

If you have any difficulties in working with the maps API — email us and we will help you to solve the problem.