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, его нет вне зависимости от этой настройки

Вместо drag'а мы можем добавлять контролы смещения/zoom'а, хотя они не самые красивые и удобные для использования на телефоне, например.

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

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

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

3. Замена карты статической картинкой

Это решение работает с помощью исключительно css, что неплохо, но

1. Мы теряем возможность выводить динамические данные из админки
2. Фильтры нужно или убрать (если они есть) или делать по картинке на каждый фильтр. Теоретически можно подменять балуны с помощью js, но это уже затратно и не надежно

Т.е. вариант вполне приемлимый при указанных выше ограничениях.