Layout: maps

Проблемы с картами на адаптивных сайтах

Draggable на touch-устроствах

Удобно, когда карту можно перемещать. Удобно это делать мышкой, не менее удобно делать это swipe'ом. Но когда карта не является единственным элементом на странице, то swipe по карте заменяет скролл страницы. Таким образом, когда карта занимает весь экран, т.е. является достаточно большой, мы теряем возможность скролла и «застреваем» в ней. Возможные варианты решения:

1. Запрет drag'а на touch-устройствах

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

1. Невозможно точно определить, является ли устройство действительно touch-девайсом. Например, на тестирование Modernirz.touch мобильный IE отдает false.
2. Некоторые десктопы могут иметь touch.
3. Проверка, является ли устройство «мобильным» с помошью библиотек типа ua-parser-js или регулярных выражений также не точна и очень сильно зависит от обновления этих самых библиотек.
4. Теоретически возможно смотреть ширину экрана, но изменение верстки mobile/tablet/desktop определяется в css и к js не имеет отношения по большому счету, не хотелось бы в js завязываться на размер экрана
5. Отключение drag'а на mobile IE в Google Maps не влияет на scroll, его нет вне зависимости от этой настройки

2. Карта в полный экран

Как минимум для планшетов / телефонов. Видится оптимальным решением поскольку при таком подходе отпадает нужда в скролле. Но в этом случае

1. На карте нужна кнопка закрытия
2. Нужна кнопка открытия карты, видимая только на устройствах
3. Фильтры (например инфраструктура, или переключение центра карты в зависимости от объекта) должны располагаться поверх карты, либо по нажатию открывать карту с уже отфильтрованными объектами. Возможно, стоит убирать фильтры для мобильной версии вовсе, а может быть и сами карты.