Polyline and Polygons do not re-render on props change #342

Activity

1. PabloGancharov commented on May 14, 2019

   

   PabloGancharov

   on May 14, 2019

   More actions

   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
   
2. abnersimoes commented on Sep 2, 2020

   

   abnersimoes

   on Sep 2, 2020

   More actions

   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>
   

   👍React with 👍1Reacted by Carlos Eduardo Reis de Godoy