Добавление карты в ZERO-Блок - Программный код для TILDA

ВИДЕО-ОБЗОР НА YOUTUBE:

Отлично решает проблему с высотой Яндекс- и Google-карт в ZERO-блоках!

Добавьте программный код из этого файла на свой сайт на Tilda в соответствии с инструкцией.

После оплаты Вы получите:

• Программный код для решения проблем с высотой карт;
• Полную видеоинструкцию по применению программного кода
  

Берите смело! Все коды на моём сайте актуальны и все качественные. По всем платным кодам я осуществляю бесплатную техподдержку если возникают трудности в их применении.

Задать вопрос перед покупкой:

Я ДАЮ 100% ГАРАНТИЮ

НА ПЛАТНЫЕ ПРОГРАММНЫЕ КОДЫ НА МОЁМ САЙТЕ.

Если у Вас трудности

с применением программных кодов,

свяжитесь со мной, я помогу.

Если по каким-то причинам

нам с Вами не удаётся применить

программный код на Вашем сайте,

Я ВЕРНУ ВАМ ДЕНЬГИ +10%

ПРИМЕРЫ ТЕХПОДДЕРЖКИ ПО КУПЛЕННЫМ КОДАМ:

Легальная покупка

По закону я обязан отправить Вам чек, поэтому при оплате Вам потребуется указать e-mail, куда платёжная система отправит чек автоматически. Никаких рассылок не будет. Спамом не занимаюсь.

ПРИМЕР ЧЕКА:

Безопасность при оплате

После оформления заказа мой сайт переадресовывает Вас на страницу банка, и платёжная информация вносится Вами на стороне банка. При этом банк не предоставляет мне доступа к данным Вашей банковской карты и т.д. В базу данных моего сайта попадает только Ваш e-mail, чтобы автоматически отправить туда ссылки для скачивания купленных файлов после подтверждения успешной оплаты от банка.

Это я:

О моём Youtube-канале:

Далее можете не читать (написано для SEO-продвижения сайта)

Здесь пойдёт речь о платном варианте с использованием моего программного кода для тех, кто желает избавиться от недостатков бесплатного метода.
При добавлении карты общепринятым способом возникает проблема растягивания карты на всю высоту HTML-элемента. С шириной проблем не возникает, но с высотой – совсем другая история. Обычно все советуют в значение height написать 100%, но так не работает. Поэтому в своём ролике про бесплатный вариант я устанавливал фиксированные значения высоты в пикселях. И не для всех дисплеев надо одинаковую высоту. А программный код общий для всех. Поэтому приходится для других вёрсток дублировать этот блок и в коде указывать другую высоту.
Кроме того, при добавлении яндекс-карты получается вот такой бордюр, который в подавляющем большинстве случаев не вписывается в дизайны сайтов.
Поэтому я написал программный код, который избавит Вас от всех этих проблем. Вы просто добавите яндекс- или гугл-карту на свой сайт и она будет принимать размеры HTML-элемента. Вам не придётся придумывать как уместить её на любых экранах в любых вёрстках, ведь мало сверстать карту для ПК, необходимо сделать ещё вёрстки для всех вот этих мобильных дисплеев.
К тому же, Вы теперь сможете задавать размеры карты в процентах по ширине и высоте окна, то есть без проблем использовать её в резиновой вёрстке.
Ну и конечно я убрал бордюр. Теперь карта чисто, без излишеств впишется в Ваш сайт.

Итак, делаем всё по-порядку: добавляем в ZERO-блок элемент HTML-код, и сначала вставим Яндекс-карту, потом Гугл. Переходим на Яндекс-карты, ищем нужный адрес, жмём вот сюда, потом «Поделиться», и вот тут, где виджет с картой, жмём на квадратики. Карта скопировалась в буфер обмена, идём в ZERO-блок, дважды кликаем на элементе HTML, выделяем и удаляем этот код по умолчанию и вставляем код карты из буфера обмена. Всё! Никаких исправлений в этом коде вносить не нужно, ничего мудрить не придётся, мой программный код потом всё сделает за Вас. Сохраняем, закрываем. А чтобы программный код был в курсе наших ожиданий, на карте мы кликаем правой кнопкой мыши и выбираем пункт Add CSS Class Name – то есть, добавить имя CSS-Класса. И вот тут появляется поле, которого раньше не было, сюда печатаем имя нашего кода. Это «mapframe». Если забудете, оно есть в самом коде, я сейчас покажу это.
После этого Вы можете верстать этот блок как обычный любой другой блок – то есть менять его ширину и высоту для любых размеров дисплеев, устанавливать положение и размеры в пикселях или процентах, привязывать эти параметры к Грид-контейнеру или Виндоуз-контейнеру… Абсолютно всё это Вы можете делать в соответствии с Вашими фантазиями по дизайну, не задумываясь о том как карта ляжет на сайт, влезет она или нет в свой блок. За Вас всё сделает мой программный код.
Поэтому ZERO-блок мы сохраняем и закрываем. Далее переходим по ссылочке внизу, в описании к этому видео, покупаем и качаем программный код с моего сайта.
Открываем файлик с кодом, копируем всё содержимое. Добавляем на страницу блок Т123 HTML, жмём «Контент» и вставляем туда содержимое файлика. И вот здесь – имя кода «mapframe», которое мы присваивали в настройках нашей карты. Так что всегда его потом можете копировать отсюда если ссылку на этот ролик потеряете.
Всё! Публикуем и наслаждаемся результатом! Карта автоматически принимает именно те размеры, которые Вы задумали в дизайне. И нет этого бордюра.

То же самое с Гугл-картой. Идём в Гугл-карты, ищем адрес, жмём «Поделиться», выбираем вкладку «Встраивание карт», жмём «Копировать HTML».
Переходим в наш ZERO-блок и можете создать новый HTML-элемент, можете заменить карту в уже созданном – это абсолютно неважно. Я заменю здесь. Сохраняем и закрываем. Всё! Опять же делать больше ничего не надо. Публикуем – и наша карта работает как положено.
Теперь Вы навсегда избавитесь от проблем вёрстки нескольких вариантов карты для ваших сайтов и забудете лазить в их программные коды каждый раз когда надо будет изменить размеры.

Ключевые слова:
как вставить карту в зеро блоке
вставить карту в тильде
tilda
тильда
встроить карту в zero блок
карта в zero блоке
яндекс карты в тильде
google карта в тильде
яндекс карта в tilda
google карта в tilda
встроить карту на сайт в тильде
встроить карту в зеро блок
zero блок
зеро блок
вставить карту в зеро блок
вставить карту в zero
карта зеро блок
карта zero блок