Общие сведения

При помощи API карт вы сможете:

создавать интерактивные карты на веб-странице;
показывать на карте различные объекты (маркеры, попапы, геометрические объекты);
производить поиск на карте: определять координаты геообъектов по их названиям и названия по координатам.

Исходный код API карт доступен на GitHub, проект открыт к предложениям и пулл-реквестам.

Начало работы

Ниже приведен простой пример создания карты.

Подключите API

Для подключения JavaScript кода API добавьте в секцию head HTML-страницы следующий код:

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

Если вас интересует подключение кода API с помощью npm, перейдите в раздел Подключение API.

Создайте контейнер карты

Для создания контейнера, в котором будет отображаться карта, необходимо добавить блочный HTML-элемент необходимого вам размера:

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

Создайте карту

Теперь все готово к тому, чтобы создать карту. Для этого добавьте следующий код в секцию head:

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

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

В данном примере карта принимает два параметра:

center - координаты центра карты в формате [широта, долгота];
zoom - коэффициент масштабирования в диапазоне от 1 до 18.

Добавьте маркер на карту

После создания карты вы можете отобразить на ней маркер, добавив одну строку кода в написанный ранее код:

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

Покажите попап с информацией

Если немного расширить добавленную выше строку кода с маркером, тогда при клике в маркер будет отображаться попап (всплывающий блок) с необходимой вам информацией:

<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('Вы кликнули по мне!');
    });
</script>

Всё вместе

Результирующий код:

<!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('Вы кликнули по мне!');
            });
        </script>
    </head>
    <body>
        <div id="map" style="width:500px; height:400px"></div>
    </body>
</html>

Дальнейшие шаги

Всё получилось? Теперь можно ознакомиться с руководством для разработчиков и примерами использования.

Техническая поддержка

Если у вас возникли сложности в работе с API карт — напишите нам письмо и мы обязательно поможем вам разобраться.