CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3touchinternet-explorer-10touchscreen
Yaqub Ahmad
Yaqub Ahmad

Reputation: 27659

Does Google Maps API V3 support touch event?

We are experiencing an issue related to GoogleMaps. The issue is mainly related to touch screens. We were trying to resolve the issue, but so far no success.

We found in this article that the Google Maps API V3 does not supports touch event? Is this is true or false?

UPDATE

This issue was handled in the bug

https://issuetracker.google.com/issues/35824421

and was solved in version 3.27 of Google Maps JavaScript API in December 2016.

Upvotes: 7

Views: 10334

Answers (3)

ATP
ATP

Reputation: 3249

Using mousedown, mouseup with e.domEvent.pointerType == "touch" makes it possible to detect the event type:

map/marker.addListener("mousedown"/"mouseup", (e) => {
  if(e.domEvent.pointerType == "touch") console.log("touch");
  else console.log("mouse/pen")
});

NOTE: e.domEvent.pointerType doesn't work for mousemove (which is BTW only available on map and not on markers) So I would recommend using the document.addEventListener() for mousemove/touchmove + flagging the current mouse/touch down/up state of the map/marker to spot the mousemove event type.

Upvotes: 0

Chris Halcrow
Chris Halcrow

Reputation: 31960

They aren't currently supported. See here for an interactive map that shows demonstrations of currently available events:

https://developers.google.com/maps/documentation/javascript/events#EventsOverview

This page also states that:

For a complete list of events, consult the Google Maps JavaScript API Reference.

Touch related events are absent from that page, therefore they aren't supported.

Commenting on the accepted answer, the events that are supported are not strictly equivalent (a touch is clearly semantically different from a mouse click), and in my experience results can be variable (for example in some cases a touch can result in firing of an onclick event on Google maps, and in some cases it can result in firing of a mouseover event), so some fall-through handling may be required to reliably handle this type of occurence when 'borrowing' these events to detect touch.

Here's a good article on handling touch with a listener:

https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiwm6y38dXXAhWHVbwKHRdUCY4QFggmMAA&url=https%3A%2F%2Fmedium.com%2F%40david.gilbertson%2Fthe-only-way-to-detect-touch-with-javascript-7791a3346685&usg=AOvVaw3pWv0R_AESWKqwF72D0hix

Upvotes: 2

tim
tim

Reputation: 3913

In my experience, the mousedown, mouseup, dragstart, dragend events work fine in place of touchstart, touchmove, touchend.

google.maps.event.addListener(myMap, "mousedown", function(event){...});

I'm pretty sure that gesture events are not going to be supported, since those are used for pinch-zoom functionality.

If you need gestures, you'd have to build your own recognizer by tracking mousedown events, storing them in an array, then tracking positions to determine angles, distances etc...

Upvotes: 15

Related Questions