react-google-maps-api
react-google-maps-api copied to clipboard
setEditable: not a LatLng or LatLngLiteral: in property lat: not a number
I have problem with edit polygon. Polygon is render correctly, but when I edit polygon I get error
InvalidValueError: setEditable: not a LatLng or LatLngLiteral: in property lat: not a number at Polygon (eval at ES6ProxyComponentFactory (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js), Polygon:14:7) at div at GoogleMap (eval at ES6ProxyComponentFactory (webpack-internal:///./node_modules/react-hot-loader/dist/react-hot-loader.development.js), GoogleMap:14:7) at MapViewRaw (webpack-internal:///./src/components/zones/ZonesPage.js:267:30)
Libs version:
- [email protected]
- react-google-maps/[email protected]
Previous I used react-google-maps [email protected]
I tried use a safari and opera GX but is same problem.
Code:
const { isLoaded } = useJsApiLoader({
googleMapsApiKey: config.GOOGLE_MAPS_API_KEY,
libraries: ["drawing", "geometry"],
// ...otherOptions
})
if(!isLoaded) return <div>Loading</div>
const options = {
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER // 'right-center' ,
// ...otherOptions
}
}
return(
<GoogleMap
options={options}
mapContainerStyle={containerStyle}
center={props.initialLocation}
zoom={12}
>
<DrawingManager
drawingMode={props.drawingMode === drawingModes.none
? null
: (props.drawingMode === drawingModes.polygon ? 'polygon' : 'circle')}
onPolygonComplete={props.onPolygonComplete}
onCircleComplete={props.onCircleComplete}
defaultDrawingMode={'polygon'}
defaultOptions={{
drawingControl: false,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
'polygon',
'circle',
],
},
polygonOptions: {
fillColor: '#FFB74D',
zIndex: 3,
fillOpacity: 0.3,
strokeWeight: 2,
clickable: true,
},
circleOptions: {
fillColor: '#FFB74D',
zIndex: 3,
fillOpacity: 0.3,
strokeWeight: 2,
clickable: true,
},
}}
/>
{
props.zones.filter(zone => zone.areaType === ZoneAreaTypes.polygon).map(zone => {
const parseZone = (zone.area.map(x => new google.maps.LatLng(parseFloat(x.lat),parseFloat(x.lng)).toJSON()));
return (
<Polygon
key={zone.id}
path={parseZone}
options={{
...shapeOptions[zone.type],
}}
editable={props.editZoneAreaMode && props.selectedZone && zone.id === props.selectedZone.id}
onClick={arg => props.editMarkerLocationMode ? props.onClick(arg) : props.onSelect(zone)}
/>)
})
}
</GoogleMap>
)
}```