Яндекс Карта на Тильде с Lazy Load и прелоудером

Дизайн настраиваете сами — наша модификация добавит нужный эффект.

Яндекс Карта часто замедляет страницу, особенно если стоит внизу лендинга или на странице контактов. Пользователь может вообще не дойти до карты, но скрипты всё равно загружаются вместе со страницей и добавляют лишнюю нагрузку.

Модификация NLM034 помогает аккуратнее встроить карту на сайт Tilda: карта подгружается не сразу, а прелоадер закрывает момент появления. Страница воспринимается легче, а блок с картой не выглядит как белое пустое место во время загрузки.

Сначала создай карту в конструкторе Яндекс Карт. Добавь нужный адрес, метку, масштаб и другие параметры, которые нужны для страницы. После настройки скопируй код карты из конструктора.

Этот код нужно вставить в первое поле генератора Nolim. Важно не менять код Яндекса вручную: если удалить часть параметров или случайно сломать структуру вставки, карта может не загрузиться или начать работать нестабильно.

В генераторе можно настроить прелоадер для карты: размер, толщину бордера, цвет прелоадера, цвет фона и непрозрачность. Эти параметры помогают сделать загрузку карты визуально аккуратной и вписать её в дизайн страницы.

Например, для светлого сайта можно поставить спокойный фон и тонкий прелоадер в цвет интерфейса. Для контрастной страницы лучше выбрать заметный прелоадер, чтобы пользователь сразу видел, что блок загружается.

После настройки скопируй готовый HTML-код из генератора. На странице Tilda добавь Zero Block, внутри него создай HTML-элемент и вставь туда сгенерированный код.

Размер карты будет соответствовать размеру HTML-элемента. Поэтому сначала задай ему нужную ширину и высоту в Zero Block, а затем проверь, как карта выглядит на десктопе и мобильной версии.

Такая настройка особенно полезна на страницах контактов, блоках «Как нас найти», лендингах с офлайн-точкой, сайтах студий, клиник, школ, шоурумов, ресторанов и сервисных компаний.

Если карта стоит ближе к концу страницы, нет смысла загружать её сразу вместе с первым экраном. Лучше дать странице открыться быстрее, а карту подгрузить тогда, когда пользователь дошёл до нужного блока.

После публикации открой страницу и проверь, что прелоадер появляется корректно, карта загружается без рывков, метка стоит в нужном месте, а размер блока совпадает с HTML-элементом в Zero Block.

Отдельно посмотри мобильную версию. Карта не должна быть слишком низкой, обрезать важную область или мешать скроллу страницы. Если блок выглядит тесно, увеличь высоту HTML-элемента на мобильном адаптиве.