Работа с попапами

Описание

Ниже приведены примеры использования попапов. Для получения подробной информации перейдите в раздел документации Попапы.

Открытие попапа при клике на маркер

<!DOCTYPE html>
<html>
    <head>
        <title>Открытие попапа при клике на маркер</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map = DG.map('map', {
                    center: [54.98, 82.89],
                    zoom: 15
                });

                DG.marker([54.98, 82.89]).addTo(map).bindPopup('Я попап!');
            });
        </script>
    </body>
</html>

Открытие попапа по умолчанию и по требованию

<!DOCTYPE html>
<html>
    <head>
        <title>Открытие попапа по умолчанию и по требованию</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <input id="showPopup" type="button" value="Открыть попап" />
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            var showButton = document.getElementById('showPopup');

            DG.then(function() {
                var map,
                    myPopUp;

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

                DG.popup([54.98, 82.89])
                    .setLatLng([54.98, 82.89])
                    .setContent('Я открыт по умолчанию')
                    .openOn(map);

                myPopUp = DG.popup()
                    .setLatLng([54.98, 82.89])
                    .setContent('Я открылся по требованию и закрыл прошлый попап!');

                showButton.onclick = function() {myPopUp.openOn(map)};
            });
        </script>
    </body>
</html>

Добавление нескольких попапов на карту

<!DOCTYPE html>
<html>
    <head>
        <title>Добавление нескольких попапов на карту</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 400px;"></div>
        <script>
            DG.then(function() {
                var map,
                    popups = DG.featureGroup(),
                    coordinates = [];

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

                // создаем 10 попапов в случайных местах и добавляем их в группу
                for (var i = 0; i < 10; i++) {
                    coordinates[0] = 54.98 - Math.random();
                    coordinates[1] = 82.89 + Math.random();
                    DG.popup()
                        .setLatLng(coordinates)
                        .setContent('Я попап №' + i)
                        .addTo(popups);
                }

                popups.addTo(map);

                // фокусируем область видимости на попапах
                map.fitBounds(popups.getBounds());
            });
        </script>
    </body>
</html>

Поведение попапа с параметром sprawling



<!DOCTYPE html>
<html>
    <head>
        <title>Поведение попапа с параметром sprawling</title>
        <script src="https://maps.api.2gis.ru/2.0/loader.js"></script>
    </head>
    <body>
        <div id="map" style="width: 300px; height: 150px;"></div>
        <input style="width: 300px;" type="button" id="sprawling" value="Попап с включенным параметром sprawling"><br />
        <input style="width: 300px;" type="button" id="no-sprawling" value="Попап без параметра sprawling"><br />
        <input style="width: 300px;" type="button" id="minWidth" value="Попап с минимальной шириной 320px">
        <script>
            DG.then(function () {
                var latLng = DG.latLng([54.98, 82.89]),
                    map;

                // проинициализируем карту с шириной 300 пикселей
                map = DG.map('map', {
                    center: latLng,
                    zoom: 13,
                    fullscreenControl: false,
                    zoomControl: false
                });

                // попап с включенным параметром sprawling
                // растянется до границ карты
                document.getElementById('sprawling').onclick = function () {
                    DG.popup({
                        maxWidth: 350,
                        sprawling: true
                    })
                    .setLatLng(latLng)
                    .setContent('Я попап!')
                    .openOn(map);
                };

                // попап без параметра sprawling
                // подстроится под ширину контента
                document.getElementById('no-sprawling').onclick = function () {
                    DG.popup({
                        maxWidth: 350
                    })
                    .setLatLng(latLng)
                    .setContent('Я попап!')
                    .openOn(map);
                };

                // попап с минимальной шириной 320px
                // выйдет за границы карты
                document.getElementById('minWidth').onclick = function () {
                    DG.popup({
                        maxWidth: 350,
                        minWidth: 320
                    })
                    .setLatLng(latLng)
                    .setContent('Я попап!')
                    .openOn(map);
                };
            });
        </script>
    </body>
</html>