Google maps, запрет скроллинга на мобильных

[Нарек]

На сайте установлен карта от гугла, ширина 100% высота 400-450px. Что бы он не мешал прокручивать вниз страницу - добавил scrollwhell:false что запрещает прокрутку карты колесом мыши. Но данная функция не помогает при touchscreen устройствах. Для них есть функция draggable: false, оно как бы запрещает скроллинг карты, но если попытаться через карту скроллить вниз страницу то опять таки не получится. Добавить прозрачный слой сверху для нормальной прокрутки на мобильных не смогу так как на карте есть маркеры на которые можно кликать.. В общем выхода не нахожу, есть у кого такой опыт?

[antonKar]

Самое лучшее решение - это добавить на мобильниках по бокам пикселей по 40 пустого пространства для скролла страницы вниз, т.к. запрещать двигать карту нехорошо.

Edited May 28, 2015 by antonKar

[Great Rash]

Отслеживаем координаты прикосновения к экрану:

 

var touch = {  x: 0,  y: 0,  threshold: 5};

Вешаем на документ событие прикосновения:

 

document.addEventListener('touchstart', function(e) {  touch.x = e.changedTouches[0].clientX;  touch.y = e.changetTouches[0].clientY;}, false);

Над картой располагаем прозрачный <div> который будет запрещать взаимодействие с ней, на него вешаем событие отпускания пальца:

 

div.addEventListener('touchend', function(e) {  var dx = Math.abs(touch.x - e.changedTouches[0].clientX),      dy = Math.abs(touch.y - e.changedTouches[0].clientY);    /*  * если у нас dx и dy меньше порогового значения,  * то это значит, что у нас клик, а не свайп произошёл  */  if (dx < touch.threshold && dy < touch.threshold) {    div.style.pointerEvents = 'none'; // в таком случае позволяем кликнуть сквозь <div>  } else {    div.style.pointerEvents = 'auto'; // в остальных случаях запрещаем взаимодействие с картой  }}, false);

ХЗ заработает так или нет

[Нарек]

Отслеживаем координаты прикосновения к экрану:

 

var touch = {  x: 0,  y: 0,  threshold: 5};

Вешаем на документ событие прикосновения:

 

document.addEventListener('touchstart', function(e) {  touch.x = e.changedTouches[0].clientX;  touch.y = e.changetTouches[0].clientY;}, false);

Над картой располагаем прозрачный <div> который будет запрещать взаимодействие с ней, на него вешаем событие отпускания пальца:

 

div.addEventListener('touchend', function(e) {  var dx = Math.abs(touch.x - e.changedTouches[0].clientX),      dy = Math.abs(touch.y - e.changedTouches[0].clientY);    /*  * если у нас dx и dy меньше порогового значения,  * то это значит, что у нас клик, а не свайп произошёл  */  if (dx < touch.threshold && dy < touch.threshold) {    div.style.pointerEvents = 'none'; // в таком случае позволяем кликнуть сквозь <div>  } else {    div.style.pointerEvents = 'auto'; // в остальных случаях запрещаем взаимодействие с картой  }}, false);

ХЗ заработает так или нет

 

Неа, не сработало) вот сам сайт

Дело в том, что когда вешаешь overlay на карту, то и на ПК запрещаются все дела) А мне надо чтобы на ПК было как есть) Можно конечно определить тауч и тогда показывать overlay, но сам метод не работает)

Самое лучшее решение - это добавить на мобильниках по бокам пикселей по 40 пустого пространства для скролла страницы вниз, т.к. запрещать двигать карту нехорошо.

Ну сайт не мой, а заказчик хочет так)

Edited May 28, 2015 by Нарек

[Great Rash]

но сам метод не работает)

А что конкретно не работает? Стиль то хоть проставляется?

[Andryshok]

Самое лучшее решение - это добавить на мобильниках по бокам пикселей по 40 пустого пространства для скролла страницы вниз

Ага, я так всегда делаю

[antonKar]

А мне надо чтобы на ПК было как есть

http://hgoebl.github.io/mobile-detect.js/

Лучше этого варианта для опредения ПК / мобильное устройство не находил.

[Нарек]

А что конкретно не работает? Стиль то хоть проставляется?

Не могу проверить, так как на планшете не открою фаербаг. 

[antonKar]

так как на планшете не открою фаербаг. 

Мобильный Chrome можно настроить на удалённый debugging в десктопном Chrome

 

Firefox тоже, но я не заморачивался этим.

Edited May 28, 2015 by antonKar

[Нарек]

Стиль по сути должен проставляться, так как если пишу другой стиль (скажем спрятать блок) - работает. Значит и тот должен работать. 

[Great Rash]

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

[Нарек]

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

Код получился таким

var touch = {  x: 0,  y: 0,  threshold: 5};var overlay = document.getElementById('map-overlay');document.addEventListener('touchstart', function(e) {  touch.x = e.changedTouches[0].clientX;  touch.y = e.changetTouches[0].clientY;}, false);overlay.addEventListener('touchend', function(e) {  var dx = Math.abs(touch.x - e.changedTouches[0].clientX),      dy = Math.abs(touch.y - e.changedTouches[0].clientY);  if (dx < touch.threshold && dy < touch.threshold) {    overlay.style.display = 'none';  } else {    overlay.style.display = 'block';  }}, false); 

у overlay стили

#map-overlay {	width: 100%;	height: 100%;	position: absolute;	top: 0;	left: 0;	z-index: 2;} 

Кручу верчу смартфоном, не прячется блок)

[Great Rash]

Мало данных.

 

Чему равны dx и dy?

В какое условие заходит скрипт, в if или в else?

[Нарек]

Мало данных.   Чему равны dx и dy? В какое условие заходит скрипт, в if или в else?

 

Если честно я в js еле еле) Если подскажете как узнать/передать Вам все данные которые нужны, мигом сделаю)

Скрипт работает в условии else. То есть если тапнуть 1 раз - срабатывает. Условие if не срабатывает.

Для наглядности поставил блоку параметры:

В условии if - менять бэкграунд на красный

В условии else - менять на синий.

Синий есть, красного нет)

[Great Rash]

Если подскажете как узнать/передать Вам все данные которые нужны, мигом сделаю)

Обычный alert() с этим легко справится. Возможно у вас всё время свайп определяется из-за того, что порог слишком маленький. Для этого я и хочу узнать dx и dy чему равны у вас. 

[Нарек]

Что то не алертит) Пока не могу понять в чем причина, щас много других дел, их закончу и вернусь за помощью)