How to draw Polyline with google-map-react?

Question

Everyone I am using google-map-react and not react-google-map. Can you help me drawing a line between two points.

          <div className='videoDetails__map'>
            <GoogleMapReact
              bootstrapURLKeys={{
                key: "",
              }}
              center={{
                lat: lat,
                lng: lng,
              }}
              defaultZoom={15}
            >
              <AnyReactComponent lat={lat} lng={lng} text='My Marker' />
            </GoogleMapReact>
          </div>

Answer 1

To place a polyline on your map, set <Polyline /> as child of Map component

render() {
  const someCoords= [
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];
 
  return(
    <div className='videoDetails__map'>
         <GoogleMapReact
           bootstrapURLKeys={{
             key: "",
           }}
           center={{
             lat: lat,
             lng: lng,
           }}
           defaultZoom={15}>
           <Polyline
              path={someCoords}
              strokeColor="#0000FF"
              strokeOpacity={0.8}
              strokeWeight={2} />
           <AnyReactComponent lat={lat} lng={lng} text='My Marker' />
         </GoogleMapReact>
    </div>
  )
}

Here you can find the documentation