Polyline and Polygons do not re-render on props change

[sselfridge]

Polyline and Polygons both do not re-render if their props are changed (visibility, color).

Currently, only checks are if the map has changed or if the path is different but other changes to the component props do not trigger a re-render.

Fixed in PR: #341 - Added propsChanged() check that runs through the prev props and existing ones and triggers a re-render if they are different.

[PabloGancharov]

meanwhile here is a workaround: trigger a resize event after the

      polygon.setOptions({ fillColor: '#FF0000', fillOpacity: 0.35 });
      maps.event.trigger(map, 'resize')  // force map update

[abnersimoes]

I found another alternative, with useRef

Create this component:

import React, {useEffect, useRef} from 'react'
import {Polygon} from 'google-maps-react'

function PolygonMap({paths, color, ...props}) {
  const polygonRef = useRef()

  useEffect(() => {
    polygonRef.current.polygon.setOptions({
      paths,
      strokeColor: color,
      fillColor: color,
    })
  }, [color, paths])

  return (
    <Polygon
      ref={polygonRef}
      paths={paths}
      strokeColor={color}
      strokeOpacity={1}
      strokeWeight={3}
      fillColor={color}
      fillOpacity={0.5}
      {...props}
    />
  )
}

export default PolygonMap

Then use it on the map:

<Map {...}>
  <PolygonMap paths={paths} color={color} />
</Map>