react-google-maps
react-google-maps copied to clipboard
How to update DrawingManager props?
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
}
}
@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
@JustFly1984 tanks's for your answer.