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

Question

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.

The_elevator · Accepted Answer · 2023-09-14 12:40:17Z

-1

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

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

answered Sep 14, 2023 at 12:40

The_elevator

911 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related