Яндекс карта фоном в сетке

Вы хотите поделиться советами и подсказками для WYSIWYG Web Builder, разместить обучающие или полезные HTML-коды? Вы можете это сделать здесь ...
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 1
Аватара пользователя

Автор Темы
spoon
Специалист
Специалист
Сообщения: 1147
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

Яндекс карта фоном в сетке

Сообщение spoon » 23 ноя 2019, 14:28

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

1. Генерируем код в конструкторе яндекс-карт тут.
Получаете что-то типа этого

Код: Выделить всё

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor:%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;width=602&amp;height=400&amp;lang=ru_RU&amp;scroll=true&amp;apikey=<ваш API-ключ>">
</script>

ширину и высоту можно убрать или прописать им 100%, apikey то же можете убрать и самое главное добавить id, если его нет в коде, это id вашей сетки где карта, получаем типа этого:

Код: Выделить всё

<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor:%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;id=wb_indexLayoutGrid1&amp;lang=ru_RU&amp;scroll=true&amp;">
</script>

2. Вставляем код между <head>.
3. Далее прописываем позиционирование для карты:

Код: Выделить всё

ymaps {
position: absolute !important;
top:0;
}

4. После того, как все сделали и просматриваете в браузере то видите, что данные в сетки будут скрыты за картой, для этого прописываем индекс колонкам, например так:

Код: Выделить всё

#indexLayoutGrid1 > .row > .col-2 {
 z-index: 3;
}

не надо прописывать мега огромные цифры, типа z-index:99999: может привести к конфликту с другими элементами проекта.

Пример прилагаю, версия 15.2.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Съешь ещё этих мягких французских булок, да выпей чаю!

Реклама
Ответить Вложения 1

Вернуться в «WYSIWYG Web Builder Советы, рекомендации, учебники и примеры кода.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость