How to draw a dotted Polygon and Circle using “@react-google-maps/api”?

Question

I am using @react-google-maps/api": "1.8.2" and wanted to draw a dotted polygon and circleBut when I pass options ({icons: [icon: lineSymbol, repeat: '10px]}) to the or . its not working.

const lineSymbol = {
    path: 'M 0,-1 0,1',
    scale: 2,
    strokeColor: 'green',
    strokeOpacity: 1,
}
const polygonProps = {
        options: {
            fillOpacity: 0,
            icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '10px',
            }, ],
            // strokeColor: polygonData.strokeColor,
            // strokeWidth: 1,
            zIndex: polygonData.zIndex || 10,
        },
        path: polygonData.pointList.map(item => ({
            lat: item[0],
            lng: item[1]
        })),
        title: polygonData.title,
    }

    <
    Polygon {
        ...polygonProps
    }
/>

here I found similar task on google map here

Answer 1

You cannot customise the stroke of Polygons and Circles like you can with Polylines.

We customise Polylines with the following syntax:

// Define a symbol using SVG path notation, with an opacity of 1.
const lineSymbol = {
  path: "M 0,-1 0,1",
  strokeOpacity: 1,
  scale: 4
};

From the Google Docs :

Symbols are useful when you want to use a vector-based icon on a marker, or add an image to a polyline

Here is a working example showing how to customise polylines.

Your only option (this won't work with Circles, only Polygons) is to render your Polygons as Polylines, which you can then style. Personally I would not bother.

Sorry I don't have better news for you!