12:36:17 - 30.04.2018

Простой Адаптивный Лендинг – Маленькие Хитрости - Карта

11 Фев 2015
Простой Адаптивный Лендинг – Маленькие Хитрости - Карта
Карта, показывающая местоположение офиса или магазина - привычный и удобный для пользователей любого сайта инструмент. Мы давно думали о том, чтобы снабдить решение Простого Адаптивного Лендинга картой ( Issue №5 в нашем репозитории на GitHub), однако есть более простой способ, который подойдёт для любого пользователя наших решений.

Простой Адаптивный Лендинг


Лендинг Парфюмерии и Косметики

Основная проблема при использовании Стандартного компонента 1С-Битрикс для отображения карты (как Яндекс.Карты, так и Google-maps) - фиксированные размеры. Абсолютно нерационально использовать фиксированные размеры карты на сайте с адаптивным дизайном, меняющем свои размеры и форму для разных устройств.
Решение этой проблемы очень простое! Укажите размер в процентах! Просто поставьте 100% и карта займёт всю ширину страницы (если разместить её напрямую) или весь блок (если внутри блока).
Компонент bitrix:map.google.view

Компонент bitrix:map.yandex.view
Результат на десктопах:
Результат на мобильных устройствах:

Примечание - Работа карт в режиме "Композит"
К сожалению на момент написания статьи шаблоны системных компонентов 1С-Битрикс для карт не поддерживают композитный режим.

Возврат к списку