javascriptreactjsgoogle-mapsreact-google-mapsreact-google-maps-api

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.


Solution

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

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