Polyline not rendering on react-google-map

Question

I'm making a geo data visualiser for many types of geometry POINT, LINESTRING, POLYLINE etc. by dynamically generating the , depending on the type.

Basically the data is like this, normal geojson etc.

"geometry": {
   "type": "Point",
   "coordinates": [
       144.25178598,
       -36.73540441
   ]
},
"geometry": {
    "type": "LineString",
    "coordinates": [[
        144.25178598,
        -36.73540441
    ], [
        144.25178598,
        -36.73540441
    ]]
}

When building a Circle is renders perfectly, but when it switches over into a Polyline it never shows.

render() {
  return (
    <Polyline
      path={[
        { lat: -36.73540441, lng: 144.25178598 },
        { lat: -36.73590441, lng: 144.25178198 }
      ]}

      //tried both these to no avail
      // path={this.getPositions(mkr.geometry.coordinates)}

      defaultPath={this.getPositions(mkr.geometry.coordinates)}
      key={mkr.id}
      label={"Test"}
      clickable
      options={{
        strokeColor: '#ff2343',
        strokeOpacity: '0.0',
        strokeWeight: 2
      }}
      visible
    />
  );
}

when both hard coding the path in and deriving it from the datasource. I'm planning to do this for Polygon, MultiPolygon etc.

Answer 1

I have replicated your code and it works on my end. You can't see any polyline drawn since your strokeOpacity is set to zero and it becomes fully transparent.

strokeOpacity: '0.0',

set this to a value greater than zero. Like:

strokeOpacity: '0.5',

Here is a sample on stackblitz:
https://stackblitz.com/edit/react-rppnco