2

My web application lets users create new location based trips. There is a google maps map displaying the current location they've entered in a form.

I've read in this post about touch scrolling and google-maps that most of touch scrolling is ok with this code:

var dragFlag = false;
var start = 0, end = 0;

$('#maps-map').on('touchstart', function(e) {
  console.log('Starting!');
  dragFlag = true;
  start = e.originalEvent.touches[0].pageY;
});

$('#maps-map').on('touchmove', function(e) {
  console.log('Moving!');
  if ( !dragFlag ) return;
  end = e.originalEvent.touches[0].pageY;
  window.scrollBy( 0,( start - end ) );
});

$('#maps-map').on('touchend', function(e) {
  console.log('Ending');
  dragFlag = false;
});

And of course, google maps has to be added to following container:

<div id="#maps-map"></div>

Now if I test this on my HTC-device, in my console I get:

'Starting!'
'Moving!'
'Moving!'
'Ending!'

But if I watch my console when debugging my Nokia Lumnia device (emulated) i get nothing.

Jquery states that is has support for this device. What could be the cause of not doing this intuïtive touch gestures?

Community
  • 1
  • 1
ReBa
  • 1,478
  • 1
  • 9
  • 10
  • Are you using jQuery Mobile framework? – Omar Mar 06 '14 at 13:14
  • Yes, I've included the jquery mobile touch events: "Touch events including: touchstart, touchmove, touchend, tap, taphold, swipe, swipeleft, swiperight, scrollstart, scrollstop" – ReBa Mar 06 '14 at 13:18
  • `#maps-map` is map canvas or div wrapping canvas? – Omar Mar 06 '14 at 13:26
  • var map = new google.maps.Map(document.getElementById('maps-map'), mapOptions); -> It's the wrapping canvas – ReBa Mar 06 '14 at 13:33

0 Answers0