Freehand polygon drawing google maps mobile - Not working

Question

I am trying to implement a function that allows a user on a mobile device (using chrome or safari for example) to be able to draw a polygon in google maps. The drawing function works just fine on a computer. I suspect my issue is that the touch events are not recognized by Google event listeners.

For example the standard computer function:

window.google.maps.event.addListener(
        map,
        'mousemove',
        function (e) {
            console.log(e)
            poly.getPath().push(e.latLng);
        }
    );

Then the mobile function (which does not work): The function isn't even called as the 'touchmove' event isn't recognized.

let move = window.google.maps.event.addListener(
        map,
        'touchmove',   
        function (e) {
            console.log(e) 
            poly.getPath().push(e.latLng);
        }
    );

Basic Example available on CodeSandbox here: CodeSandBox

It does seem from the Google Docs that touch events aren't supported: Google Maps - Events

If that is the case, there must be some form of workaround. Companies like Zillow.com and compass.com did implement a similar solution. See screenshots below:

Appreciate any assistance.

Answer 1

Google does recognize the "touchstart" event which for my purpose was all I needed.

Created 2x functions, one for on "mousedown" and one for "touchstart". Rest of the functionality remains virtually unchanged.

// On mouse click
window.google.maps.event.addDomListener(
      map.getDiv(),
      "mousedown",
      function (e) {
        drawFreeHandMouse(map, polygonRef);
      }
    );

// on mobile device screen touch
window.google.maps.event.addDomListener(
      map.getDiv(),
      "touchstart",
      function (e) {
        drawFreeHandHand(map, polygonRef);
      }
    );

Full working solution can be viewed here: CodeSandBox

Hopefully this can help somebody else or can be improved upon.