How to update DrawingManager props?

[mMarcos208]

Can I to modify fillColor of polygonOptions with props?

import React from 'react'
import {compose, withProps} from 'recompose'
import DrawingManager from 'react-google-maps/lib/components/drawing/DrawingManager'
import {withScriptjs, withGoogleMap, GoogleMap} from 'react-google-maps'
import {Spin} from 'antd'

const Mapa: React.FC = (props: any) => {
  const {color} = props
  let type: string = 'satellite'
  console.log(color)
  function markerPolygon(polygon: any): void {
    let points: any = polygon.getPath().getArray()

    points.forEach((point: any) => {
      const {lat, lng} = point
      console.log(lat(), lng())
    })
  }
  return (
    <GoogleMap
      mapTypeId={type}
      defaultZoom={props.zoom}
      defaultCenter={{lat: -19.810968444640704, lng: -43.54377112158203}}
    >
      <DrawingManager
        defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
        defaultOptions={{
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [google.maps.drawing.OverlayType.POLYGON],
          },
          polygonOptions: {
            fillColor: props.color,
            fillOpacity: 1,
            strokeWeight: 2,
            zIndex: 1,
          },
        }}
        onPolygonComplete={(polygon): void => markerPolygon(polygon)}
      />
    </GoogleMap>
  )
}
interface InnerProps {
  zoom: number
  center: number[]
}
interface OuterProps {
  zoom: number
  color: string
}
export default compose<InnerProps, OuterProps>(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_PROVIDER_GOOGLE}&v=3.exp&libraries=geometry,drawing,places`,
    loadingElement: (
      <div
        style={{
          textAlign: 'center',
          background: 'rgba(0, 0, 0, 0.05)',
          borderRadius: 4,
          marginBottom: 20,
          padding: 30,
          margin: 20,
        }}
      >
        <Spin />
      </div>
    ),
    containerElement: <div style={{height: `400px`}} />,
    mapElement: <div style={{height: `100%`}} />,
  }),
  withScriptjs,
  withGoogleMap,
)(Mapa)

Collor is modify, but map not render with new color

{
   "drawingControl":true,
   "drawingControlOptions":{
      "position":2,
      "drawingModes":[
         "polygon"
      ]
   },
   "polygonOptions":{
      "fillColor":"#00d084",
      "fillOpacity":1,
      "strokeWeight":2,
      "zIndex":1
   }
}

[JustFly1984]

@mMarcos208 The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

[mMarcos208]

@JustFly1984 tanks's for your answer.