reactjsgoogle-mapsgoogle-maps-react

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


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.


Solution

  • 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.