POPUP из балуна яндекс

Денис7 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
04.03.2019

Имеется взятый из песочницы яндекса

ymaps.ready(init);

function init () {

    var myMap = new ymaps.Map('map', {

            center: [52.826716, 107.832781],

            zoom: 8,

            controls: ['zoomControl', 'typeSelector',  'fullscreenControl', 'geolocationControl']

        }, {

            searchControlProvider: 'yandex#search'

        }),

        objectManager = new ymaps.ObjectManager({

            // Чтобы метки начали кластеризоваться, выставляем опцию.

            clusterize: true,

            // ObjectManager принимает те же опции, что и кластеризатор.

            gridSize: 32,

            clusterDisableClickZoom: true,

            clusterBalloonMaxWidth: 290,

            clusterBalloonMaxHeight: 300,

            clusterBalloonContentLayoutWidth: 255,

            clusterBalloonLeftColumnWidth: 70,

            

        });

    // Чтобы задать опции одиночным объектам и кластерам,

    // обратимся к дочерним коллекциям ObjectManager.

    objectManager.objects.options.set('preset', 'islands#greenDotIcon');

    objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');

    myMap.geoObjects.add(objectManager);

    $.ajax({

        url: "js/data_map.json"

    }).done(function(data) {

        objectManager.add(data);

    });

}

Содержание json 

{

    "type": "FeatureCollection",

    "features": [

       {"type": "Feature", "id": 64, "geometry": {"type": "Point", "coordinates": [52.990937, 108.283042]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 65, "geometry": {"type": "Point", "coordinates": [52.990931, 108.283031]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 66, "geometry": {"type": "Point", "coordinates": [52.993628, 108.281625]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 78, "geometry": {"type": "Point", "coordinates": [52.792222, 107.958055]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 86, "geometry": {"type": "Point", "coordinates": [52.873333, 108.145000]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 87, "geometry": {"type": "Point", "coordinates": [52.873333, 108.144444]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

{"type": "Feature", "id": 88, "geometry": {"type": "Point", "coordinates": [52.884167, 108.112778]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}},

 {"type": "Feature", "id": 125, "geometry": {"type": "Point", "coordinates": [51.639287, 105.543242]}, "properties": {"balloonContentBody": "", "clusterCaption": ""}}

    ]

}

Необходимо:

1) Настроить отображение картинки в балуне, прилагаются файлы как отображается сейчас и как надо с сохранением размеров.

2) При нажатии на картинку в правой части балуна должно выводиться модальное окно на всю ширину и высоту страницы с содержимым по ссылке из файла json (панорама 360), в правом верхнем углу должен быть контрастный крестик для закрытия модального окна, после закрытия всплывающего окна балун должен оставаться без изменений.

Скрипт взял отсюда: object_manager

AJAXJavaScript

Заявки фрилансеров