<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>