Наши контакты:
+7 (812) 981-03-88
zakaz@metrez.com
Санкт-Петербург, пр. Стачек 47У Территория "Кировского завода"
ИНН 780724012650
ОГРНИП 318784700199932
Наши контакты:
+7 (812) 981-03-88
zakaz@metrez.com
Санкт-Петербург, пр. Стачек 47У Территория "Кировского завода"
ИНН 780724012650
ОГРНИП 318784700199932

Как добавить в ZeroBlock Яндекс.Карту со своей иконкой в Tilda

Как выполнили данный пример:
1. Создали ZeroBlock
2. Добавили в него элемент HTML c шириной 100% по WindowContainer и высотой 600px
3. В этот HTML элемент прописали div контейнер -
<div id="map"></div>
3. Выставили высоту Zero тоже 600px
4. Добавили на страницу блок ДРУГОЕ►Т123 и вставили в него наш код для карты
Основные настройки кода:
width: 100%; height: 600px; - ширина и высота карты
center: [59.891652, 30.202718] - координаты точки центра при загрузке карты
zoom: 13 - базовое увеличение при загрузке карты
ymaps.Placemark([59.890811, 30.247827] - координата нашей точки
iconImageHref: 'https://clck.ru/DyAce' - ссылка для иконки

<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;
        }
    </style>

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

        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),

        //Задаём координаты нашей основной точки
        myPlacemarkWithContent = new ymaps.Placemark([59.890811, 30.247827], {
            //Подсказка при наведении
            hintContent: 'Санкт-Петербург, пр. Стачек 47У Территория "Кировского завода"',
            //ToolTip 
            balloonContent: 'Наши контакты:<br>+7 (812) 981-03-88<br> zakaz@metrez.com <br>Санкт-Петербург, пр. Стачек 47У <br>Территория "Кировского завода"<br> ИНН 780724012650 <br>ОГРНИП 318784700199932',
            //Надпись поверх иконки
            iconContent: ''
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://clck.ru/DyAce',
            // Размеры метки.
            iconImageSize: [270, 110],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-54, -110],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });

    myMap.geoObjects
         .add(myPlacemarkWithContent);
});
</script>
Отключить Zoom по скроллу

 <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;
        }
    </style>

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

        // Создаём макет содержимого.
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        ),

        //Задаём координаты нашей основной точки
        myPlacemarkWithContent = new ymaps.Placemark([59.890811, 30.247827], {
            //Подсказка при наведении
            hintContent: 'Санкт-Петербург, пр. Стачек 47У Территория "Кировского завода"',
            //ToolTip 
            balloonContent: 'Наши контакты:<br>+7 (812) 981-03-88<br> zakaz@metrez.com <br>Санкт-Петербург, пр. Стачек 47У <br>Территория "Кировского завода"<br> ИНН 780724012650 <br>ОГРНИП 318784700199932',
            //Надпись поверх иконки
            iconContent: ''
        }, {
            // Опции.
            // Необходимо указать данный тип макета.
            iconLayout: 'default#imageWithContent',
            // Своё изображение иконки метки.
            iconImageHref: 'https://clck.ru/DyAce',
            // Размеры метки.
            iconImageSize: [270, 110],
            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-54, -110],
            // Смещение слоя с содержимым относительно слоя с картинкой.
            iconContentOffset: [15, 15],
            // Макет содержимого.
            iconContentLayout: MyIconContentLayout
        });
    
     myMap.behaviors.disable('scrollZoom');
    
    myMap.geoObjects
         .add(myPlacemarkWithContent);
});
</script>
Made on
Tilda