Как добавить несколько своих меток в Яндекс карту в Tilda

Как добавить несколько своих меток в Яндекс карту в Tilda

1
Создали шапку из ZeroBlock
2
Добавили в ней 5 иконок Image цифрами и задали им ссылку #placeicon
+ добавили 1 элемент Text со ссылкой #placetext
3
Добавили блок T123 шириной 12 колонок и вставили в него контейнер <div id="map"></div>
4
Создали 5 блоков ST510 и заполнили их контентом
Задали им ссылки
#popup:number1
#popup:number2
#popup:number3
#popup:number4
#popup:number5
5
Вставили код в блок Другое - Т123
В коде прописали:
- центр карты
center: [45.25506128322973,34.282927215986]
- координаты точек
ymaps.Placemark([45.09303239188218,34.63054020633623]
......
- ссылки для миниатюр
iconImageHref: 'https://static.tildacdn.com/tild3565-3139-4836-b265-616632653235/279.jpg'
......
- подсказки и текст
hintContent: 'БЕЛАЯ СКАЛА'
$('.placetext').text('БЕЛАЯ СКАЛА');
......
Mo-tilda. Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Добавляем Яндекс Карту со своими метками. Создаём взаимодействие меток с элементами на сайте.
Длительность видео 31 минута
Фрагмент видео
Библиотека для примера
 <a href="#popup:number1"  class="showsform1"></a>
 <a href="#popup:number2"  class="showsform2"></a>
 <a href="#popup:number3"  class="showsform3"></a>
 <a href="#popup:number4"  class="showsform4"></a>
 <a href="#popup:number5"  class="showsform5"></a>
 

 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
	<style>
       #map {
           /*Задаём ширину, высоту и отступы у карты*/
            width: 100%; height: 600px; padding: 0; margin: 0;
        }
      a[href^="#place"] {
          pointer-events:none;
      }
     [class$='-image-with-content'] {
      border-radius: 100px;
}

     .t-popup__container.t-popup__container-static {
    -moz-transform: translateY(30%) scale(.5);
    -ms-transform: translateY(30%) scale(.5);
    -webkit-transform: translateY(30%) scale(.5);
    -o-transform: translateY(30%) scale(.5);
    transform: translateY(30%) scale(0.5);
}
.t-popup__container-animated {
    -webkit-transition: transform ease-in-out .6s;
    -moz-transition: transform ease-in-out .6s;
    -o-transition: transform ease-in-out .6s;
    transition: transform ease-in-out .6s;
}
.activebaloon{
    box-shadow: 0px 0px 0px 6px #fcb42f;
     border-radius: 100px;
    
}
    </style>

<script>

$(document).ready(function(){
  
  //Добавили классы к иконкам и тексту в ZeroBlock
  $('a[href="#placeicon"]').addClass('placeicon').hide();
  $('a[href="#placetext"]').addClass('placetext');
  

   ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            //Координаты центра при запуске карты
            center: [45.25506128322973,34.282927215986],
            //Увеличение карты при запуске
            zoom: 8
        }, {
            searchControlProvider: 'yandex#search'
        }),

        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),
//****************************************
        //Задаём координаты нашей основной точки
        myPlacemarkWithContent1 = new ymaps.Placemark([45.09303239188218,34.63054020633623], {
            hintContent: 'БЕЛАЯ СКАЛА'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://static.tildacdn.com/tild3565-3139-4836-b265-616632653235/279.jpg',
            // Размеры метки.
            iconImageSize: [30, 30],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -15],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });
        
//****************************************        
        //Задаём координаты нашей второй точки
        myPlacemarkWithContent2 = new ymaps.Placemark([45.04639697641663,36.18786242202529], {
            hintContent: 'КОЯШСКОЕ ОЗЕРО'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://static.tildacdn.com/tild6531-3333-4561-b830-396266356536/280.jpg',  
            // Размеры метки.
            iconImageSize: [30, 30],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -15],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });
        
//****************************************        
        //Задаём координаты нашей третьей точки
        myPlacemarkWithContent3 = new ymaps.Placemark([44.50034524980931,33.59851330607388], {
            hintContent: 'БАЛАКЛАВСКАЯ БУХТА'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://static.tildacdn.com/tild3733-3065-4330-b737-373232366532/281.jpg',  
            // Размеры метки.
            iconImageSize: [30, 30],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -15],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });     
        
        //****************************************        
        //Задаём координаты нашей четвёртой точки
        myPlacemarkWithContent4 = new ymaps.Placemark([44.447141825393345,34.0589618849408], {
            hintContent: 'ТАРАКТАШСКАЯ ТРОПА'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://static.tildacdn.com/tild3030-3330-4465-a636-306166623164/284.jpg',  
            // Размеры метки.
            iconImageSize: [30, 30],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -15],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });    
        
        
        //****************************************        
        //Задаём координаты нашей пятой точки
        myPlacemarkWithContent5 = new ymaps.Placemark([45.34765387473703,32.49356836939008], {
            hintContent: 'ТАРХАНКУТ'
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://static.tildacdn.com/tild3061-3164-4062-b234-313766613266/276.jpg',  
            // Размеры метки.
            iconImageSize: [30, 30],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-15, -15],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });    
        
        
//Добавляем объекты на карту
    myMap.geoObjects
         .add(myPlacemarkWithContent1)
          .add(myPlacemarkWithContent2)
           .add(myPlacemarkWithContent3)
            .add(myPlacemarkWithContent4)
             .add(myPlacemarkWithContent5);
         
      //При клике миниатюру 1         
         myPlacemarkWithContent1.events.add('click', function () { 
               $('[class$="activebaloon"]').removeClass('activebaloon');
               $('[class$="-image-with-content"]:eq(0)').addClass('activebaloon');
               $('.placeicon').hide();$('.placeicon:eq(0)').show(200);
               $('.placetext').text('БЕЛАЯ СКАЛА');
             setTimeout(function(){$(".showsform1")[0].click();}, 500);  
         });
         //При клике миниатюру 2
         myPlacemarkWithContent2.events.add('click', function () {
               $('[class$="activebaloon"]').removeClass('activebaloon');
               $('[class$="-image-with-content"]:eq(1)').addClass('activebaloon');
               $('.placeicon').hide();$('.placeicon:eq(1)').show(200);
               $('.placetext').text('КОЯШСКОЕ ОЗЕРО');
             setTimeout(function(){$(".showsform2")[0].click();}, 500);  
         });
         //При клике миниатюру 3
          myPlacemarkWithContent3.events.add('click', function () {
               $('[class$="activebaloon"]').removeClass('activebaloon');
               $('[class$="-image-with-content"]:eq(2)').addClass('activebaloon');
               $('.placeicon').hide();$('.placeicon:eq(2)').show(200);
               $('.placetext').text('БАЛАКЛАВСКАЯ БУХТА');
             setTimeout(function(){$(".showsform3")[0].click();}, 500);  
         });
         //При клике миниатюру 4
           myPlacemarkWithContent4.events.add('click', function () {
               $('[class$="activebaloon"]').removeClass('activebaloon');
               $('[class$="-image-with-content"]:eq(3)').addClass('activebaloon');
               $('.placeicon').hide();$('.placeicon:eq(3)').show(200);
               $('.placetext').text('ТАРАКТАШСКАЯ ТРОПА');
             setTimeout(function(){$(".showsform4")[0].click();}, 500);  
         });
         //При клике миниатюру 5
           myPlacemarkWithContent5.events.add('click', function () {
              $('[class$="activebaloon"]').removeClass('activebaloon');
               $('[class$="-image-with-content"]:eq(4)').addClass('activebaloon');
               $('.placeicon').hide();$('.placeicon:eq(4)').show(200);
               $('.placetext').text('ТАРХАНКУТ');
             setTimeout(function(){$(".showsform5")[0].click();}, 500);  
         });
         
});

});
</script>


БЕЛАЯ СКАЛА
Огромный белый утес расположен в Белогорском районе Крыма, в долине реки Биюк Кара-Су. Огромное каменное плато заканчивается отвесной стеной высотой в 150 метров. Скала, нависая над долиной, бывает особенно красива в лучах заходящего солнца. Когда-то она была морским дном, а ее слои являются своеобразной летописью прошедших 70 миллионов лет. Внимательный взгляд обязательно заметит окаменевших моллюсков, морских ежей, крабов, а в самых молодых слоях, что находятся на поверхности плато, встречаются зубы акул, кости китов и тюленей.
КОЯШСКОЕ ОЗЕРО
Это удивительно красивое и самое соленое озеро в Крыму лежит на юге Керченского полуострова. Летом водоросли, живущие в озере, окрашивают его воду в розовый цвет, и чем выше температура, тем интенсивнее становится цвет. Берега этого красивого места Крыма покрыты кристаллами соли, пахнущей фиалками, а на водной глади встречаются причудливые соляные айсберги. Всего лишь узкая полоска песчаного пляжа отделяет розовое Кояшское озеро от Черного моря.
БАЛАКЛАВСКАЯ БУХТА
Так называется небольшой поселок рядом с Судаком. Когда машина минует последний поворот, перед глазами открывается необыкновенно красивое место, вызывающе красивое даже для самого Крыма. Горы Орел и Сокол защищают Новый Свет от ветров, а воздух пропитан фитонцидами сосен и можжевельника. Три бухты этого красивого места в Крыму – Зеленая, Голубая и Синяя – завораживают чистотой и прозрачностью своих вод, а горные тропинки и гроты придают Новому Светунеповторимое очарование.
ТАРАКТАШСКАЯ ТРОПА
По этой тропе можно пройти от Ялты до Ай-Петри и в обратном направлении. Конечно, спускаться легче. Виды, открывающиеся вашим глазам во время спуска, прекрасны, но сумасшедший восторг вызовет одно из самых красивых мест Крыма − само урочище Таракташ и его главная достопримечательность – дугообразная скала высотой в несколько десятков метров. Поражает, что при нетолстых стенах и довольно большой высоте одиноко стоящая скала не разрушается. Тропа проведет вас по лощине, потом через узкий проход между скалами выведет наружу. Этот проход называется Таракташскими воротами, идти по нему жутковато, но восторг от этого красивого места Крыма заставляет забыть о страхе.

Если повезет оказаться возле скалы в полдень, когда солнце стоит высоко, можно увидеть, как скала переливается всеми оттенками желтого и коричневого цветов. Высота захватывает дух, но красота такая, что кроме нее ничего не замечаешь. Продолжая спуск, оказываетесь у другого фантастически красивого места Крыма – «летящей воды».

ТАРХАНКУТ
Этот дикий полуостров, одно из самых красивых мест Крыма, находится в самой западной его точке и, наверное, так и останется тем местом, с которым человек никогда ничего не сделает. Просто не сможет. Уж слишком грозны отвесные скалы, слишком глубоки его подводные пещеры.

Здесь настолько чистое море, что стоя высоко на обрыве, можно рассмотреть камни на дне. Но самое удивительное зрелище откроется с моря: огромные сквозные гроты прорезают скалы насквозь, за высокими арками скрываются пещеры, а скалы закручены в самые немыслимые фигуры. Время от времени неутомимый прибой и ветер обрушивают часть скалистого берега, и тогда в этом красивом месте Крыма появляется новый утес фантастического вида.

Made on
Tilda