JSFiddle - React, Tailwind, and code Playground

by AlinaBeawer

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id='map2'></div>
<div id='box'></div>

CSS

#box {
    width:100%;
    border:1px #8d8e8d solid; 
    padding:10px; 
    display:none;
    position:absolute;
    top:0px;
    left:0px;
    z-index:3000;
    background-color: rgba(247, 241, 217, 0.7);
    }

#map2 {
    width: 800px;
    height: 600px;
}

JavaScript

// ЯНДЕКС КАРТЫ ВЫДЕЛЯЕМ ПОЛИГОН ПРИ КЛИКЕ свой балун в див http://api.yandex.ru/maps/

//сама карта
ymaps.ready(function () {
 myMap = new ymaps.Map('map2', {
        center: [57.618542, 39.838443],
        zoom:17,
        controls: []
    }),
 


///создаем свою коллекцию полигонов 
 myCollectionPoligon = new ymaps.GeoObjectCollection ({},{
	fillColor: '33cc0066',
    strokeColor: '#00FF0090',
    strokeWidth: 1
});

        

//МЕТКА для примера, оставляем в коде, иначе полигоны не будут работать
placemark2 = new ymaps.Placemark([55.71129026, 37.49919491], {
name: 'Название',
adress: 'адрес компании2'
});
myMap.geoObjects.add(placemark2);      


///создаем полигон дом 20
Polygon20 = new ymaps.Polygon([[
[57.62141,39.83589],
[57.62117,39.83565],
[57.62116,39.83571],
[57.62078,39.83536],
[57.6207,39.83564],
[57.62107,39.836],
[57.62105,39.83608],
[57.62129,39.83632],
[57.62141,39.83589]
]],
{hintContent:"дом 20", 
zag:'<h3>заголовок дома 20</h3>',
content:'контент к дому 20'    
});
//добавляем полигон в коллекцию 
myCollectionPoligon.add(Polygon20);		
    
    
    
    
///создаем полигон дом 16
var Polygon16 = new ymaps.Polygon([[  
[57.61976,39.83876],
[57.61994,39.83809],
[57.61992,39.83806],
[57.62005,39.83762],
[57.61996,39.83753],
[57.61965,39.83866],
[57.61976,39.83876]
]],
    {hintContent: "дом 16", 
	zag:'<span style="color:gray; font-weight:normal">Вспольинское поле, д. 16</span>',
	content:'<div id="zd16" class="allfirmsYamap">'+

        '<div class="firmaYamap">'+
           '<div class="nazvanYamap">Ванные комнаты</div>'+
            '<div class="telYamap">45-99-21, 58-14-07</div>'+
            '<div class="sferaYamap">сантехника</div>'+
       '</div>'+

      '<div class="firmaYamap">'+
             '<div class="nazvanYamap">ОрионПромСтрой</div>'+
            '<div class="telYamap">68-09-17, 8-920-124-44-81</div>'+
            '<div class="sferaYamap">промышленный альпинизм, теплые полы</div>'+
       '</div>'+

'</div>'
});
//добавляем...