Как убрать балун из карты яндекса?

Информация о точках выводится рядом с картой. Нужно просто что бы при клике на точки по карте, выводил эти точки рядом с картой в блоке, а не на самой карте в всплывающем окне. Карта вот:
ymaps.ready(init);

    function init() {
        // Создаем карту.
        var myMap = new ymaps.Map("map", {
            center: ['{{ query.lat }}', '{{ query.lon }}'],
            zoom: 6,
        }, {
            searchControlProvider: 'yandex#search'
        });

        // Создаем круг.
        var circle, placemark;

        placemark = new ymaps.Placemark(['{{ query.lat }}', '{{ query.lon }}'], {
            //iconContent: '<?php print $center; ?>',
        }, {
            preset: 'islands#redStretchyIcon',
            draggable: false
        });
        myMap.geoObjects.add(placemark);
        
        // 20 км погрешность радиуса.
        circle = new ymaps.Circle([placemark.geometry.getCoordinates(), {{ distance + 20 * 1000 }}], {}, {
            geodesic: true
        });

        placemark.events.add('drag', function(e) {
            return circle.geometry.setCoordinates(placemark.geometry.getCoordinates());
        });

        myMap.geoObjects.add(circle);
        clusterer = new ymaps.Clusterer({
               
                preset: 'islands#invertedVioletClusterIcons',
              
                groupByCoordinates: false,
                
                clusterDisableClickZoom: true,
                clusterHideIconOnBalloonOpen: false,
                geoObjectHideIconOnBalloonOpen: false,
            }),
           
            getPointData = function(phone, fio) {
                return {
                    // balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
                    balloonContentBody: '<p><a href="tel:+' + phone + '"><font color = "blue">+<strong>' + phone + '</strong></font></a><a href="' + phone + '" target="_blank"><font color = "blue"></font></a></p>',
                    // balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + fio + '</strong>',
                    
                };
            },
          
            getPointOptions = function() {
                return {
                    preset: 'islands#violetIcon'
                };
            },
            points = [
                {% if countRes > 0 %}
                    {% for driver in res %} ['{{ driver.lat }}', '{{ driver.lon }}'],
                    {% endfor %}
                {% endif %}
            ],
            geoObjects = [];

        {% if countRes > 0 %}
		{% for key,driver in res %}
                geoObjects[{{ key }}] = new ymaps.Placemark(points[{{ key }}], getPointData(
                    '{{ driver.phone_number }}', '{{ driver.fio }}'
                ), getPointOptions());
            {% endfor %}
        {% endif %}


        clusterer.options.set({
            gridSize: 80,
            clusterDisableClickZoom: true,
            clusterBalloonContentLayoutHeight: 1500,

        });
        clusterer.add(geoObjects);
        myMap.geoObjects.add(clusterer);
       
        var myMapMob = new ymaps.Map("mapMob", {
            center: ['{{ query.lat }}', '{{ query.lon }}'],
            zoom: 6,
            controls: []
        }, {
            searchControlProvider: 'yandex#search'
        });
        
       // ползунок масштаба
        myMapMob.controls.add('zoomControl', {
            size: 'small',
        });
        // элемент управления «полноэкранным режимом»
        myMapMob.controls.add('fullscreenControl');
        // элемент управления "геолокация"
        myMapMob.controls.add('geolocationControl');

        // Создаем круг.
        var circleMob, placemarkMob;

        placemarkMob = new ymaps.Placemark(['{{ query.lat }}', '{{ query.lon }}'], {
            //iconContent: '<?php print $center; ?>',
        }, {
            preset: 'islands#redStretchyIcon',
            draggable: false
        });
        myMapMob.geoObjects.add(placemarkMob);

        // 20 км погрешность радиуса.
        circleMob = new ymaps.Circle([placemark.geometry.getCoordinates(), {{ distance + 20 * 1000 }}], {}, {
            geodesic: true
        });

        placemarkMob.events.add('drag', function(e) {
            return circle.geometry.setCoordinates(placemark.geometry.getCoordinates());
        });

        myMapMob.geoObjects.add(circleMob);

        /**
         * Создадим кластеризатор, вызвав функцию-конструктор.
         * Список всех опций доступен в документации.
         * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
         */
        clustererMob = new ymaps.Clusterer({
                /**
                 * Через кластеризатор можно указать только стили кластеров,
                 * стили для меток нужно назначать каждой метке отдельно.
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
                 */
                preset: 'islands#invertedVioletClusterIcons',
                /**
                 * Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
                 */
                groupByCoordinates: false,
                /**
                 * Опции кластеров указываем в кластеризаторе с префиксом "cluster".
                 * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/ClusterPlacemark.xml
                 */
                clusterDisableClickZoom: true,
                clusterHideIconOnBalloonOpen: false,
                geoObjectHideIconOnBalloonOpen: false
            }),
            /**
             * Функция возвращает объект, содержащий данные метки.
             * Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
             * Поле balloonContentBody - источник данных для контента балуна.
             * Оба поля поддерживают HTML-разметку.
             * Список полей данных, которые используют стандартные макеты содержимого иконки метки
             * и балуна геообъектов, можно посмотреть в документации.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
             */
            getPointData = function(phone, fio) {
                return {
                    // balloonContentHeader: '<font size=3><b><a target="_blank" href="https://yandex.ru">Здесь может быть ваша ссылка</a></b></font>',
                    balloonContentBody: '<a href="tel:+' + phone + '"><font color = "blue">+<strong>' + phone + '</strong></font></a><a href="' + phone + '" target="_blank"><font color = "blue"></button></font></a><a class="line__button line__button-map card-hvr__button-map card-hvr__button-map_phone" href="tel:' + phone + '"></a><a class="line__button line__button-map card-hvr__button-map card-hvr__button-map_wapp" href="' + phone + '"></a>',
                    // balloonContentFooter: '<font size=1>Информация предоставлена: </font> балуном <strong>метки ' + index + '</strong>',
                    clusterCaption: '<font color = "black"><strong>' + fio + '</strong></font> ',
                };
            },
            /**
             * Функция возвращает объект, содержащий опции метки.
             * Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
             */
            getPointOptions = function() {
                return {
                    preset: 'islands#violetIcon'
                };
            },
            points = [
                {% if countRes > 0 %}
                    {% for driver in res %} ['{{ driver.lat }}', '{{ driver.lon }}'],
                    {% endfor %}
                {% endif %}
            ],
            geoObjects = [];

        {% if countRes > 0 %}
		{% for key,driver in res %}
                geoObjects[{{ key }}] = new ymaps.Placemark(points[{{ key }}], getPointData(
                    '{{ driver.phone_number }}', '{{ driver.fio }}'
                ), getPointOptions());
            {% endfor %}
        {% endif %}


        clustererMob.options.set({
            gridSize: 80,
            clusterDisableClickZoom: true
        });
        clustererMob.add(geoObjects);
        myMapMob.geoObjects.add(clustererMob);
    }
  • Вопрос задан
  • 152 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы