Инструкция подключения Яндекс.карты

Следуйте пунктам инструкции:
1. Создайте div block в месте, где будет карта;
2. Установите метку "o_text" и значение "карта";
3. Опубликовать сайт и произвести конвертацию;
4. Перейти в админ-панель сайта > "Группы полей" > "Добавить";
5. Дать название новой группе полей, например: "Карта";
6. В меню "Условия отображения" выбрать параметры: "Отображать группу полей, если: Страница с опциями" > "равно" > "Опции";;
7. Нажать на клавишу "Добавить поле";
8. Параметры поля: Ярлык поля: Карта, Имя поля: karta, Тип поля: Область текста;
9. Нажать "Опубликовать";
10. Перейти на сайт https://yandex.ru/map-constructor/ и нажать "Создать карту"
11. Даем название карты, вводим адрес здания, нажимаем "Сохранить и продолжить"
12. Выбрать "Растянуть по ширине", нажать "получить код карты"
13. Нажать на код и скопировать его
14. Вернуться в админ панель сайта, перейти в раздел "Внешний вид" > "Опции"
15. Вставляем полученный код в текстовую область и нажимаем "Обновить"

После выполненных действий на месте установленного div block'а будет интерактивная Яндекс.карта

Инструкция с изображениями

1. Создайте div block в месте, где будет карта;

2. Установите метку "o_text" и значение "карта";

3. Опубликовать сайт и произвести конвертацию;

4. Перейти в админ-панель сайта > "Группы полей" > "Добавить";

5. Дать название новой группе полей, например: "Карта";

6. В меню "Условия отображения" выбрать параметры: "Отображать группу полей, если: Страница с опциями" > "равно" > "Опции";

7. Нажать на клавишу "Добавить поле";

8. Параметры поля: Ярлык поля: Карта, Имя поля: karta, Тип поля: Область текста;

9. Нажать "Опубликовать";

10. Перейти на сайт https://yandex.ru/map-constructor/ и нажать "Создать карту";

11. Даем название карты, вводим адрес здания, нажимаем "Сохранить и продолжить"

12. Выбрать "Растянуть по ширине", нажать "получить код карты"

13. Нажать на код и скопировать его

14. Вернуться в админ панель сайта, перейти в раздел "Внешний вид" > "Опции"

15. Вставляем полученный код в текстовую область и нажимаем "Обновить"

Дополнение от автора:

Описал процесс установки карты с помощью сервиса WTW.

Точно возникнут вопросы с адаптацией под мобильные устройства, оставляю на домашнее задание. Способы решения:

1. Одинаковый размер высоты кода карты и дива,

2. Задать размер высоты карты 100%,

3 Разместить див карты в другом див блоке и установить overflow: hidden.

=================

К чему эти танцы с бубном? В Webflow создали контейнер, тип поля назначили "редактор wp", установили плагин YaMaps и вставили в самом редакторе спокойно карту