<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
#map {
width: inherit;
height: inherit;
padding: 0;
margin: 0;
}
.tn-atom.tn-atom__html {
width: inherit;
height: inherit;
}
ymaps strong { color: #2196f3}
a[href^="#place"] {pointer-events:none}
div[class*="mapgoto_"] {cursor:pointer}
@media screen and (min-width:860px){
div[class*="mapgoto_"] .tn-atom {
text-align: left;
padding-left: 10px;
}
}
[class$='-image-with-content'] { border-radius: 100px}
.activepoint{
color: #ffffff !important;
background-color: #fcb42f !important;
}
</style>
<script>
$(document).ready(function(){
let coordinates = [
[ 59.936847, 30.309599 , 'Адмиралтейский фонтан' , '<strong>Санкт-Петербург</strong><br>Александровский сад' , 'https://static.tildacdn.com/tild3862-3136-4536-a232-393862383366/XXXL.jpg' ],
[ 59.934333, 30.337477 , 'Фонтан-каскад Вращающийся шар' , '<strong>Санкт-Петербург</strong><br>Малая Садовая улица' , 'https://static.tildacdn.com/tild6366-3263-4233-b132-393239326633/XXXL.jpg'],
[ 59.926399, 30.347569 , 'Фонтан Мостик' , '<strong>Санкт-Петербург</strong><br>Большая Московская улица' , 'https://static.tildacdn.com/tild3433-3735-4363-b666-313264306437/XXXL.jpg'],
[ 59.926279, 30.317203 , 'Фонтан Нептун' , '<strong>Санкт-Петербург</strong><br>Московский проспект' , 'https://static.tildacdn.com/tild6632-3062-4139-b235-656131623963/XXXL.jpg'],
[ 59.868946, 30.322244 , 'Фонтан Венок славы' , '<strong>Санкт-Петербург</strong><br>Аллея Героев' , 'https://static.tildacdn.com/tild6639-3430-4161-a331-646361663139/XXXL.jpg'],
[ 59.851804, 30.323920 , 'Фонтанный комплекс Московская площадь' , '<strong>Санкт-Петербург</strong><br>Московская площадь' , 'https://static.tildacdn.com/tild3062-6630-4833-a136-656137663063/XXXL.jpg'],
[ 59.954311, 30.355630 , 'Поющие фонтаны' , '<strong>Санкт-Петербург</strong><br>площадь Ленина' , 'https://static.tildacdn.com/tild6631-3036-4361-b835-633233643138/XXXL.jpg']
];
$('div[class*="mapgoto_"]').each(function( index ) {
let className = $(this).attr('class');
for (let i = 0; i < coordinates.length; i++) {
let contain = className.includes('mapgoto_'+(i+1));
if (contain) {
$(this).attr('mapgoto_',i);
};
};
});
ymaps.ready(function () {
let myMap = new ymaps.Map('map', {
center: [ coordinates[0][0] , coordinates[0][1] ], //Координаты центра при запуске карты
zoom: 15 //Увеличение карты при запуске
}, {searchControlProvider: 'yandex#search' }),
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
);
let mapArr = [];
for (i = 0; i < coordinates.length; i++) {
mapArr[i] = new ymaps.Placemark([ coordinates[i][0] , coordinates[i][1] ], {
hintContent: coordinates[i][2],
balloonContent: coordinates[i][3],
}, {
iconLayout: 'default#imageWithContent',
iconImageHref: coordinates[i][4],
iconImageSize: [30, 30], // Размеры метки.
iconImageOffset: [-15, -15], // Смещение левого верхнего угла иконки относительно
iconContentOffset: [15, 15], // Смещение слоя с содержимым относительно слоя с картинкой
iconContentLayout: MyIconContentLayout
});
myMap.geoObjects.add(mapArr[i]);
mapArr[i].events.add("click", function(e) {
var coords = e.get("coords");
myMap.zoomRange.get(coords).then(function(range) {
myMap.setCenter(
coords, //сейчас карта центрируется по координатам клика, для центрирования по координатам метки:
18 // здесь указываем желаемый масштаб. Можно относительно текущего myMap._zoom
);
});
});
};
$('.mapgoto_1 .tn-atom').addClass('activepoint');
//Клик по кнопке
$('div[class*="mapgoto_"]').click(function(){
$('div[class*="mapgoto_"] .tn-atom').removeClass('activepoint');
$(this).find('.tn-atom').addClass('activepoint');
let pointNum = +$(this).attr('mapgoto_');
myMap.balloon.open([ coordinates[pointNum][0] , coordinates[pointNum][1] ], coordinates[pointNum][3] );
setTimeout(function(){
myMap.setZoom( 15 );
myMap.panTo([coordinates[pointNum][0] , coordinates[pointNum][1]], {delay: 2500});
}, 500);
});
});
});
</script>