Как сделать перемещение между точками в Яндекс Карте в Tilda
Фонтаны города
Адмиралтейский фонтан
Фонтан-каскад Вращающийся шар
Фонтан Мостик
Фонтан Нептун
Фонтан Венок славы
Фонтанный комплекс Московская площадь
Поющие фонтаны

Как сделать перемещение между точками в Яндекс Карте в Tilda

1
Создали ZeroBlock
2
Добавили в него элемент html и вставили в него строку <div id="map"></div>
3
Добавили в него 7 элементов button с классами mapgoto_1, mapgoto_2 ...
4
Вставили код в блок Другое - Т123
В коде задали координаты каждой точки, всплывающие подсказки и ссылку на иконку

[ 59.936847, 30.309599 , 'Адмиралтейский фонтан' , '<strong>Санкт-Петербург</strong><br>Александровский сад' , 'https://static.tildacdn.com/tild3862-3136-4536-a232-393862383366/XXXL.jpg' ]
Библиотека примера
<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');
        let contain = className.includes('mapgoto_'+(index+1));
        if (contain) $(this).attr('mapgoto_',index);
});


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>'
        );
    
    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][3],
            }, {
            iconLayout: 'default#imageWithContent',
            iconImageHref: coordinates[i][4],
            iconImageSize: [30, 30], // Размеры метки.
            iconImageOffset: [-15, -15], // Смещение левого верхнего угла иконки относительно
            iconContentOffset: [15, 15], // Смещение слоя с содержимым относительно слоя с картинкой
            iconContentLayout: MyIconContentLayout
        }))
}; 
$('.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.panTo([coordinates[pointNum][0] , coordinates[pointNum][1]], {delay: 2500});   
        });        
});
});
</script>
Made on
Tilda