Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setEditable: not a LatLng or LatLngLiteral: in property lat: not a number #3357

Open
Michalk001 opened this issue May 21, 2024 · 0 comments
Open

Comments

@Michalk001
Copy link

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:

  • react@17.0.2
  • react-google-maps/api@2.19.3

Previous I used react-google-maps lib@9.4.5

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>
  )
}```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant