<div id="mapyandex"></div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>


<script>
$(document).ready(function(){

let coordinates = [];
let adressList = ``;

$('.uc-map-point .t-slds__item').each(function(index){
    
    let coordLine = [];
    let elem = $(this);
    let name = elem.find('.t-heading').html();
    let coord = elem.find('.t-descr').text().split(',');
    let image = elem.find('.t-bgimg').attr('data-original');
    
    let desciption = elem.find('.t-text').html();
    
    coordLine.push(coord[0]);
    coordLine.push(coord[1]);
    coordLine.push(name);
    coordLine.push(image);
    
    coordLine.push(name+'<br>'+desciption);
    
    coordinates.push(coordLine);
    
    adressList += `
        <div class="adress-item" data-tab-num="${index}">
            <div class="adress-item-inner-wrap">
                
                    
                    <div class="adress-title">${name}</div>
              
                <div class="adress-descr">${desciption}</div>
            </div>
        </div>
    `;
});

let adressWrapper = `<div class="adress-wrapper-main t-text">${adressList}</div>`;
$('#mapyandex').after(adressWrapper);


ymaps.ready(function () {
    let myMap = new ymaps.Map('mapyandex', {
            center: [ coordinates[0][0] , coordinates[0][1]  ], //Координаты центра при запуске карты
            zoom: 12  //Увеличение карты при запуске
        }, {searchControlProvider: 'yandex#search' }),
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        );
    
    for (i = 0; i < coordinates.length; i++) {
        myMap.geoObjects
            .add(new ymaps.Placemark([ coordinates[i][0] , coordinates[i][1]  ], {
                //hintContent: coordinates[i][2],
                balloonContent: coordinates[i][4],
            }, {
            iconLayout: 'default#imageWithContent',
            iconImageHref: coordinates[i][3],
            iconImageSize: [50, 50], // Размеры метки.
            iconImageOffset: [-25, -25], // Смещение левого верхнего угла иконки относительно
            iconContentOffset: [25, 25], // Смещение слоя с содержимым относительно слоя с картинкой
            iconContentLayout: MyIconContentLayout
        }))
    };
    
    
    

$('.adress-item[data-tab-num="0"]').addClass('activepoint');

function changePoint(el){

    
    myMap.balloon.open([ coordinates[el][0] , coordinates[el][1]  ], coordinates[el][4] );
            
            setTimeout(function(){
                myMap.panTo([+coordinates[el][0] , +coordinates[el][1]], {delay: 2500});     
            }, 200);
};


//Клик по кнопке
$('.adress-item').click(function(){
    $('.adress-item').removeClass('activepoint');
    let pointNum = $(this).attr('data-tab-num');
    $(this).addClass('activepoint');
    changePoint(pointNum);
    
    if(window.winWidth<960){
        
        const speed = 500;
        const top = $('#mapyandex ymaps').offset().top-50;
        $('html, body').animate({scrollTop: top}, speed);
      
    };
    
    
});  


});
});
</script>



<style>

ymaps[class$="-balloon__content"] strong {
    /*display: block;*/
    padding: 5px 0;
}



.uc-map-code .t-col {
    height: 600px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 380px;
}


#mapyandex {          
    padding: 0; 
    margin: 0;
    position: relative;
}



.adress-item.activepoint {
    background-color: #ededed;
}


.uc-map-point{
    display: none;
}




.adress-wrapper-main {
    /*position: absolute;*/
    top: 0;
    right: 0;
    z-index: 99;
    height: inherit;
    overflow: auto;
 
}

.adress-item {
    background-color: #fff;
    margin-bottom: 0px;
    padding: 10px 15px;
    line-height: 1.5;
    border-radius: 0px;
    cursor: pointer;
    border-bottom: 1px solid #d7d7d7;
}

.adress-wrapper-main::-webkit-scrollbar-thumb {
    background: #a7a7a7;
    border-radius: 10px;
}
    
    
.adress-wrapper-main::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: #f0f0f0;
}


.adress-title {
    background-image: url(https://static.tildacdn.com/tild3435-3737-4438-b931-323330363463/3586361-location-map.svg);
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: left 3px;
    padding-left: 30px;
}


@media screen and (max-width:960px){
    
.adress-wrapper-main{
    position: static;
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
}

.adress-title>div {
    font-size: 16px !important;
}

.adress-descr,
.adress-descr>*{
    font-size: 13px  !important;
}

div#mapyandex {
    height: 400px;
    order: 1;
}


.adress-title {
    background-size: 22px;
    padding-left: 25px;
}


.uc-map-code .t-col {
    grid-template-columns: 1fr;
    height: max-content;
}


.adress-item {
    box-shadow: inset 0 0 0 1px #ededed;
}
}



</style>