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.

The list of available events is here: https://developers.google.com/maps/documentation/javascript/reference/map#Map-Events — MrUpsidown, Aug 19 '21 at 13:47
@MrUpsidown, I remember you and I exchanged "words" in the past. I already went through this list and the relevant event documentation as per my post. It's possible I could have missed something, could you please clarify what you are referring to specifically about your provided link? — Stephan Du Toit, Aug 19 '21 at 14:20
Well you're trying to use an event that doesn't exist... You provided 2 screenshots but no links to the maps. Have you checked their code? How do they do it? DrawingManager does not have a "freehand" drawing mode so I would suppose this is something you will have to handle on your own. Most probably you will need to simplify the drawing and convert it to a Polygon. What about [this](https://stackoverflow.com/questions/22758950/google-map-drawing-freehand)? — MrUpsidown, Aug 19 '21 at 15:00
I also found [this article](https://techblog.geekyants.com/a-brief-how-to-on-freehand-sketching-on-google-maps) and [this one](https://www.codeproject.com/Tips/5294895/Freehand-Drawing-using-Google-Map-and-Spatial-Sear) and [this example](http://jsfiddle.net/doktormolle/mX3VQ/). Also you might need to adjust [gesture handling](https://developers.google.com/maps/documentation/javascript/interaction#controlling_gesture_handling) for mobile. — MrUpsidown, Aug 19 '21 at 15:05
Thank you. I will work through the various links and post the solution as soon as I managed to implement it. — Stephan Du Toit, Aug 19 '21 at 16:23

score 0 · Answer 1 · answered Aug 22 '21 at 18:01

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.

Freehand polygon drawing google maps mobile - Not working

1 Answers1