Description

sselfridge

opened on Apr 27, 2019

Issue body actions

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.

Reacted by Pablo

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>
   

   Reacted by Carlos Eduardo Reis de Godoy

Issue actions