Can not obtain the paths from the <Polygon> component.

[sergiunimat]

Hey there, I am trying to obtain the paths of the Polygon component provided by this library upon essentially updating the component. Here is my code:

import { PolygonProps, Polygon } from '@react-google-maps/api'
import { createPolygon } from './GeoMapFunctions.ts'
import { useReduxSelector } from '../../store/ReduxHooks.ts'
import { useCallback, useRef } from 'react'

const CustomPolygon = () => {
	const { shapeCharacteristics } = useReduxSelector(
		state => state.geoMapSlice
	)

	const polygonRef = useRef<Polygon>()

	const basePath = createPolygon(
		shapeCharacteristics!.center,
		shapeCharacteristics!.sides ?? 4,
		shapeCharacteristics!.radius > 0.1 ? 0.01 : shapeCharacteristics!.radius
	)

	const handleEditPolygon = () => {
		// AT.1
		const { paths } = polygonRef.current as PolygonProps
		console.log('the paths: ', paths)

		// AT.2
		let aa = polygonRef.current as PolygonProps | null
		console.log('A: ', aa)
		console.log('A-type: ', typeof aa)

		// AT.3
		const polygon: PolygonProps = polygonRef.current as PolygonProps
		if (polygon) {
			console.log('the polygon: ', polygon)
			if ('paths' in polygon) {
				const polygonProps = polygon as PolygonProps
				console.log('PolygonProps:', polygonProps)
				// Access polygon properties here
			} else {
				console.log('Not a PolygonProps object.')
			}
		} else {
			console.log('Polygon not available.')
		}
	}

	const onLoad = useCallback((ref: any) => (polygonRef.current = ref), [])
	return (
		<Polygon
			onLoad={onLoad}
			onMouseUp={handleEditPolygon}
			onDragEnd={handleEditPolygon}
			draggable={true}
			editable={true}
			paths={basePath}
			options={{
				strokeColor: 'black',
				fillColor: 'black',
				fillOpacity: 0.5
			}}
		/>
	)
}

export default CustomPolygon

I had this issue previously with the component however, there I`ve managed to solve this issue with an identical approach

let circleRef = useRef<Circle>()
const draggedCircle = (circleEventObject: google.maps.MapMouseEvent) => {
		if (circleEventObject.latLng) {
			dispatch(setShapeCenter(circleEventObject.latLng.toJSON()))
		}
	}

	const handleRadiusChange = () => {
		const circleProps = circleRef.current as CircleProps | null

		if (circleProps !== null) {
			console.log('CircleProps prop radius !!!!: ', circleProps?.radius)
			if (circleProps?.radius) {
				dispatch(setShapeRadius(circleProps?.radius))
			}
		}
	}
	const onLoad = useCallback((ref: any) => (circleRef.current = ref), [])

	return (
		<Circle
			onLoad={onLoad}
			draggable={true}
			editable={true}
			center={shapeCharacteristics!.center}
			radius={shapeCharacteristics!.radius}
			onDragEnd={draggedCircle}
			onRadiusChanged={handleRadiusChange}
			options={{
				strokeColor: 'red',
				fillColor: 'red',
				fillOpacity: 0.05
			}}
		/>
	)

The reference of the Polygon is a very weird object, when expanded recursively it expands to a very large object

I have found a potential solution here: https://codesandbox.io/p/sandbox/reactgooglemapsapi-editing-a-polygon-popr2?file=%2Fsrc%2Findex.js%3A86%2C31, however, this is a JS solution and I was not able to "convert" it to Type Script, I quickly run into the same issue.

I would very much appreciate if someone could help me understand how to solve this issue, thank you in advance.

[muneem90]

@sergiunimat did you find any solution? i am also facing same issue? Mine issue is <Polygon component is not taking paths. even in typing paths is not present