How can I find where a user has clicked on a Polyline?

Question

If I add a Polyline to my map with a click function:

    onPolylineClick = (props, polyline) => {
        console.log(props)
        console.log(polyline)
    }

    <Polyline
        onClick={this.onPolylineClick}
        path={gpsCoords}
    />

Then how do I figure out where on the line it was clicked? I can see props.mapCenter but that doesn't change depending on where I click, it's just the centre of the map.

Answer 1

You need to also pass a third parameter in your onPolylineClick since the latLng for the point you clicked in the polyline is there. You can do something like:

onPolylineClick = (props, polyline, e) => {
   console.log("Polyline Clicked on latlng: ")
   console.log(e.latLng.lat()+","+e.latLng.lng());
  };

You can check this sample code. Make sure to add your API Key in the GoogleApiWrapper for the code to properly run.