I'm creating an Angular project in which I'm using the Google Maps Javascript API to create a multi-touch application where users can interact with the map as well as other components simultaneously. (For example, one user can be moving the map around while another user is moving a separate component all simultaneously)
I'm already able to successfully do multi-touch actions between other components so I know it's not a problem with my code but I think there may be something wrong with Google Maps?
Check it out: https://developers.google.com/maps/documentation/javascript/examples/map-simple
Here's a video showing the problem: https://youtu.be/M2qjzpFCniI
If you have a laptop with a touch screen, you can test out the problem on any of the Maps docs that show a map example. Basically, just start panning around on the map with your left hand (keep doing this the whole time), and then add your right hand, somewhere on some whitespace just outside of the map container and just draw in a circular motion.
Once both hands are doing that, stop moving on the map and you'll see that now the map will still be moving, but now you are controlling it with the right even though it's not touching the map. Basically if you're already touching the map and someone else touches outside of it, the person outside will hijack the touch event.
Does anyone know why this happens or if there's any way to fix it?
I'm currently using a library called HammerJS to handle multi-touch between my own custom components if that helps. But I know Google Maps has their own touch event listeners.