CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsreact-google-mapsreact-google-maps-api
The_elevator
The_elevator

Reputation: 91

How to manipulate multiple paths with array structure in Polygon react google maps

Hello i am using the react-google-maps/api library and i want to map some coordinates in my Google Map using the Polygon component. So far i have manage to map Polygons in my map with holes like this:

return polyline.location.map((outerCoords, polyInd) => {
........
<Polygon
  key={`polyline-${i}-${polyInd}`}
  paths={[outerCoords, innerCoords[0], innerCoords[1]}
.........

And the result is like this.

My problem is that i don't know each time the innerCoords array length so i want to add the inner coordinates some how dynamic. How i can do this? I was thinking using this Array.prototype.flat() but this is not solve my problem, (Map without holes). Also i don't know if i can somehow map() the innerCoords array and then use Polygon inside, but i think with this way i will see only one polygon hole at the time.

Upvotes: -1

Views: 65

Answers (1)

The_elevator
The_elevator

Reputation: 91

I think i solve my problem, i just did this:

return polyline.location.map((outerCoords, polyInd) => {
  ........
  <Polygon
    key={`polyline-${i}-${polyInd}`}
    paths={[outerCoords, ...innerCoords]}
  .........

Upvotes: -1

Related Questions