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

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

Автор Темы
spoon
Эксперт
Эксперт
Сообщения: 1320
Зарегистрирован: 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.
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005

Реклама
Аватара пользователя

stedivid
Экспериментатор
Экспериментатор
Сообщения: 84
Зарегистрирован: 11 мар 2017, 08:54
Версия Web Builder: 14.2.2
Имя: Виталий

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

Сообщение stedivid » 20 дек 2019, 20:47

БОЛЬШОЕ СПАСИБО. Давно мечтал так сделать

Отправлено спустя 48 секунд:
spoon,
БОЛЬШОЕ СПАСИБО!!!! Вы СУПЕР
Я не волшебник, я только учусь

Аватара пользователя

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

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

Сообщение spoon » 20 дек 2019, 20:52

:-ok-:
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005

Аватара пользователя

Vitamin701
Знаток
Знаток
Сообщения: 451
Зарегистрирован: 20 ноя 2017, 19:30
Версия Web Builder: 12.5

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

Сообщение Vitamin701 » 20 дек 2019, 23:27

:-:ok:-:

Аватара пользователя

Alex15963
Опытный
Опытный
Сообщения: 633
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4
Имя: Алексей

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

Сообщение Alex15963 » 21 дек 2019, 02:24

Спасибо! :danser_dans:

Аватара пользователя

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

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

Сообщение spoon » 21 дек 2019, 07:18

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

Аватара пользователя

ZeroGul
Подающий надежды
Подающий надежды
Сообщения: 119
Зарегистрирован: 15 фев 2012, 23:49
Версия Web Builder: 11.1.1
Контактная информация:

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

Сообщение ZeroGul » 18 апр 2020, 00:16

Спасибо давно искал :ya_hoo_oo: :ya_hoo_oo:
Удачи

Аватара пользователя

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

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

Сообщение spoon » 18 апр 2020, 07:06

:-ok-:
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005

Аватара пользователя

MasterOfPuppets
Продвинутый
Продвинутый
Сообщения: 275
Зарегистрирован: 10 май 2015, 19:37
Версия Web Builder: 14.2.2
Имя: Александр
Контактная информация:

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

Сообщение MasterOfPuppets » 20 апр 2020, 20:23

Благодарю. Тоже недавно подпрыгивал с этим моментом)
Чтобы стать крабом, нужно стать раком и ходить боком

Аватара пользователя

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

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

Сообщение spoon » 20 апр 2020, 21:10

На здоровье
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005


Ответить Вложения 1

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

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

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