DEV Community

Discussion on: How to use the Google Maps API with React.js

Collapse
 
rosscatley72 profile image
Ross Catley

Great article. I'm stuck on a specific next step, I wonder if anyone can help me.

I've added a polyline to the map, and want a user to be able to edit it. That bit is fairly straightforward you use the {Polyline} component and add it to the map the same way as the Marker in the article, and set the editing prop to true.

What I've been trying to find the answer to for days now is how I then access the getPath() method once the user has finished editing the line to access the LatLng points that the user has edited on the line.

I've tried adding a ref={} on the polyline itself, and although I can access the coordinates of the line from that, after editing the coordinates return the original coordinates and not the user edited LatLng of the updated polyline.

I'm trying to keep to using functional hooks, and all the examples I can find (and there are only a couple of them) seem to use the native Javascript API within classes rather than a react component. If that's the only way to do it then I'll stick to that, but I can't find any documentation that talks about the React library and the getPath() method, or the "set_at" or "insert_at" events that fire on the path of the polyline when a user moves or adds a new point.

Has anyone done this or knows how to do it, I would be really grateful for any help.