Google map with zones on top of province, some are opaque some are transparent

I have built this interactive zone mapping on top of a province, and it is supposed to cut out the polygons laid on the map from an overlayPolygon that has larger outerbounds so the map is seen through only where the polygons are drawn and everything else is white.

It is mostly working but some of the zones show opaque colors not the transparency to the map, and I can't figure out why. I noticed if I change the outerBounds to something like this

const outerBounds = [
    new google.maps.LatLng(70, -140),
    new google.maps.LatLng(70, -60),
    new google.maps.LatLng(45, -60),
    new google.maps.LatLng(45, -140),
    new google.maps.LatLng(70, -140)
];

It would show the zones that were opaque as transparent but the other zones would be opaque which is not the desired effect they should all be transparent.

I did try and make sure that none of the polygons overlap and seem to have double checked that if you zoom in.

Here is a https://codesandbox.io/p/sandbox/quirky-heyrovsky-zkk5p7 of it's current state.

You will see that 5, 9, 8 & 2 in the map are opaque when they should be transparent.

And here is the code minus the data

const mapOptions = {
      zoom: 5,
      center: { lat: 53.7267, lng: -126.6476 }, // Centered on BC
      mapTypeId: "terrain",
      // zIndex: 100,
      // disableAutoPan: true,
      mapTypeControl: false, // Disable map and satellite options
      fullscreenControl: false, // Disable fullscreen control
      //   streetViewControl: false, // Disable street view control
      // zoomControl: false,       // Disable zoom control
      scrollwheel: false, // Disable mouse scroll zoom
      styles: [
        {
          featureType: "all",
          elementType: "all",
          stylers: [
            { saturation: -100 }, // This makes the map greyscale
          ],
        },
        {
          featureType: "administrative.province",
          elementType: "labels",
          stylers: [{ visibility: "off" }],
        },
      ],
    };

    const map = new google.maps.Map(document.getElementById("map"), mapOptions);

    // Add the overlay that covers the entire map
    const outerBounds = [
      new google.maps.LatLng(85, 180),
      new google.maps.LatLng(85, 90),
      new google.maps.LatLng(85, 0),
      new google.maps.LatLng(85, -90),
      new google.maps.LatLng(85, -180),
      new google.maps.LatLng(0, -180),
      new google.maps.LatLng(-85, -180),
      new google.maps.LatLng(-85, -90),
      new google.maps.LatLng(-85, 0),
      new google.maps.LatLng(-85, 90),
      new google.maps.LatLng(-85, 180),
      new google.maps.LatLng(0, 180),
      new google.maps.LatLng(85, 180),
    ];

    //   const outerBounds = [
    //     new google.maps.LatLng(70, -140),
    //     new google.maps.LatLng(70, -60),
    //     new google.maps.LatLng(45, -60),
    //     new google.maps.LatLng(45, -140),
    //     new google.maps.LatLng(70, -140)
    // ];

    const overlayPolygon = new google.maps.Polygon({
      paths: [outerBounds],
      strokeColor: "#000000",
      strokeOpacity: 0.0,
      strokeWeight: 0,
      fillColor: "#FFFFFF",
      fillOpacity: 1.0,
      zIndex: -100,
    });

    overlayPolygon.setMap(map);

    addEcoZones();

    // Function to calculate the centroid of a polygon
    function calculateCentroid(path) {
      let lat = 0,
        lng = 0;
      path.forEach((point) => {
        lat += point.lat();
        lng += point.lng();
      });
      lat /= path.length;
      lng /= path.length;
      return new google.maps.LatLng(lat, lng);
    }

    // Function to fetch and display eco zones
    function addEcoZones() {
      // Assuming you have a global variable with eco zones data for BC
      // Assuming you have a global variable with eco zones data for BC
      for (let index = 0; index < ecoZonesData.length; index++) {
        const zone = ecoZonesData[index];

        console.log("zone.ecoprovince_number", zone.ecoprovince_number);

        console.log("zone", zone);

        const zoneCoordinates = zone.coordinates.map(
          (coord) => new google.maps.LatLng(coord.lat, coord.lng)
        );

        // Define the polygon for the eco zone
        const ecoZonePolygon = new google.maps.Polygon({
          paths: zoneCoordinates,
          // strokeColor: indexTitle !== -1 && title ? zoneCoords[index]?.ecoprovince_color : !ecoZonesData[index].related ? '#003D4C' : zoneCoords[index].ecoprovince_color,
          strokeOpacity: 1,
          strokeWeight: 3,
          fillColor: zone.ecoprovince_color,
          fillOpacity: 0,
          // zIndex: 2000
        });

        ecoZonePolygon.setMap(map);

        // console.log("zone", zone)

        // Add the eco zone coordinates as a hole in the overlayPolygon
        let paths = overlayPolygon.getPaths();
        // Simplify coordinates for testing
        console.log("Before push paths:", zone);
        paths.push(new google.maps.MVCArray(zoneCoordinates));
        overlayPolygon.setPaths(paths);

        // Calculate the centroid of the polygon
        const centroid = calculateCentroid(zoneCoordinates);

        console.log("zone", zone);

        // Add a marker or label at the centroid
        const marker = new google.maps.Marker({
          position: centroid,
          map: map,
          label: {
            text: zone.ecoprovince_number.toString(),
            color: "#003D4C",
            fontSize: "16px",
            fontWeight: "bold",
          },
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 8.5,
            fillColor: "#FFF",
            fillOpacity: 1,
            strokeWeight: 0,
          },
        });

        // Add mouseover event listener for the polygon
        ecoZonePolygon.addListener("mouseover", function (event) {
          const hoverBoolColor =
            ecoZonesData[index].related &&
            indexTitle === -1 &&
            ecoZonesData[index].species;

          ecoZonePolygon.setOptions({
            fillColor: zone.ecoprovince_color,
            fillOpacity: 1, // You can also adjust the fill opacity if needed
          });
        });

        // Add mouseout event listener for the polygon to reset the fill color
        ecoZonePolygon.addListener("mouseout", function (event) {
          // Reset the fill color of the polygon

          //console.log("ecoZonesData[index].related", ecoZonesData[index].related)
          //console.log("indexTitle", indexTitle)
          //console.log("zoneCoords[index].species", ecoZonesData[index].species)
          //console.log("zoneCoords[index].species", ecoZonesData[index].species)

          switch (true) {
            default:
              ecoZonePolygon.setOptions({
                fillColor: zone.ecoprovince_color,
              });
          }

          // const hoverBoolColor = !ecoZonesData[index].related && indexTitle !== -1 && ecoZonesData[index].species;

          ecoZonePolygon.setOptions({
            fillOpacity: 0.35, // Reset the fill opacity if needed
            // fillColor: hoverBoolColor ? "#000" : zoneCoords[index]?.ecoprovince_color,
          });
        });
      }
    }

Solution

The winding direction (order of the coordinates) needs to be reversed for the polygons that aren't working for you.

codesandbox with 2,5,8 and 9 reversed (and work as the others): https://codesandbox.io/p/sandbox/inspiring-gwen-vsfcfc

code snippet (with all the regions that weren't working reversed):

let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
 const ecoZonesData = [
 {
 coordinates: [{lat: 52.0407149750606,lng: -125.06286498086665,},
 {lat: 51.82394499323912,lng: -124.09606810586665,},
 {lat: 51.715167077073936,lng: -121.30554076211665,},
 {lat: 52.08124281918826,lng: -120.78918334024165,},
 {lat: 51.68793162750932,lng: -120.05309935586665,},
 {lat: 51.3186468390059,lng: -119.40490599649165,},
 {lat: 50.89095680282389,lng: -119.26208373086665,},
 {lat: 50.619896013457314,lng: -118.89953490274165,},
 {lat: 49.04692201925179,lng: -118.43810912149165,},
 {lat: 49.0613217078524,lng: -120.98693724649165,},
 {lat: 50.347263891289984,lng: -122.27233763711665,},
 {lat: 50.36128329651373,lng: -122.25036498086665,},
 {lat: 51.45576796007855,lng: -125.32653685586665,},
 {lat: 51.79677508903388,lng: -125.48034544961665,},
 ],ecoprovince_color: "#9faee5",ecoprovince_number: "8",},
{coordinates: [
{lat: 55.00444666611976,lng: -127.85339232461665,},
{lat: 55.15538102035699,lng: -127.50182982461665,},
{lat: 54.343796307728134,lng: -126.75475951211665,},
{lat: 54.44613510237433,lng: -126.18347044961665,},
{lat: 54.06104664198942,lng: -124.82116576211665,},
{lat: 53.77635895004284,lng: -123.01940794961665,},
{lat: 53.925415108344694,lng: -121.52526732461665,},
{lat: 53.71788806247802,lng: -121.60217162149165,},
{lat: 53.50279801358738,lng: -121.56921263711665,},
{lat: 53.01648343920404,lng: -121.50329466836665,},
{lat: 52.121733896998705,lng: -120.86608763711665,},
{lat: 51.74918833829762,lng: -121.42639037149165,},
{lat: 51.8375238037456,lng: -122.60192748086665,},
{lat: 51.885017405191064,lng: -123.90930052774165,},
{lat: 52.02043726153543,lng: -124.53552123086665,},
{lat: 52.10824095539782,lng: -125.15075560586665,},
{lat: 51.979854243410934,lng: -125.28259154336665,},
{lat: 51.823944993239145,lng: -125.59020873086665,},
{lat: 53.30630982705289,lng: -127.06237669961665,},
{lat: 54.26687460328379,lng: -127.72155638711665,},
],ecoprovince_color: "#7d2248",ecoprovince_number: "6",},{coordinates: [
{lat: 50.10975457217688,lng: -126.04018739476447,},
{lat: 50.217081615311095,lng: -126.03194764867072,},
{lat: 50.36798595209428,lng: -125.94405702367072,},
{lat: 50.31189140917159,lng: -125.97701600804572,},
{lat: 50.343452740565326,lng: -125.96328309788947,},
{lat: 50.3469582612954,lng: -125.96053651585822,},
{lat: 50.45550109274616,lng: -125.86715272679572,},
{lat: 50.445007810379174,lng: -125.85067323460822,},
{lat: 50.22059645506562,lng: -124.91683534398322,},
{lat: 49.93859045182621,lng: -123.77425721898322,},
{lat: 49.65492415876237,lng: -122.45589784398322,},
{lat: 49.585528511310194,lng: -122.28286317601447,},
{lat: 49.380324690982135,lng: -122.17574647679572,},
{lat: 49.02139844840583,lng: -122.00545839085822,},
{lat: 49.01419334431985,lng: -122.39821962132697,},
{lat: 49.00338373259621,lng: -122.76351503148322,},
{lat: 49.010590401162546,lng: -123.31283143773322,},
{lat: 49.54099213254181,lng: -123.95003846898322,},
{lat: 49.369594795077255,lng: -124.30160096898322,},
{lat: 48.880710753006674,lng: -123.55453065648322,},
{lat: 48.44533530635397,lng: -123.24691346898322,},
{lat: 48.44533530635397,lng: -123.68636659398322,},
{lat: 48.61993682283502,lng: -124.08187440648322,},
{lat: 49.28367128969507,lng: -124.96078065648322,},
{lat: 50.05159192726816,lng: -125.97152284398322,},
],ecoprovince_color: "#f3e600",ecoprovince_number: "9",},{coordinates: [
{lat: 54.069801521857876,lng: -120.01406024098996,},
{lat: 53.58999509098323,lng: -119.77236102223996,},
{lat: 53.31522303909961,lng: -119.64052508473996,},
{lat: 53.21007996330827,lng: -119.26698992848996,},
{lat: 53.23638996948654,lng: -119.00331805348996,},
{lat: 53.09148482485652,lng: -118.78359149098996,},
{lat: 52.85331091530301,lng: -118.60781024098996,},
{lat: 52.56042458171206,lng: -118.34413836598996,},
{lat: 52.332755293999135,lng: -118.14638445973996,},
{lat: 52.44004036507977,lng: -117.92665789723996,},
{lat: 52.37301775140548,lng: -117.75087664723996,},
{lat: 52.238666878926615,lng: -117.75087664723996,},
{lat: 52.1443785723959,lng: -117.31142352223996,},
{lat: 51.98227593665033,lng: -117.11366961598996,},
{lat: 51.72440898788221,lng: -116.91591570973996,},
{lat: 51.792411998236354,lng: -116.71816180348996,},
{lat: 51.61539106844021,lng: -116.52040789723996,},
{lat: 51.369140674892144,lng: -116.12490008473996,},
{lat: 51.12155880837108,lng: -115.97109149098996,},
{lat: 50.98343705649394,lng: -115.68544695973996,},
{lat: 50.817146861621765,lng: -115.53163836598996,},
{lat: 50.580551702987876,lng: -115.35585711598996,},
{lat: 50.56659715828704,lng: -115.07021258473996,},
{lat: 50.412824241482205,lng: -114.87245867848996,},
{lat: 50.13195391806708,lng: -114.71865008473996,},
{lat: 49.83525527979458,lng: -114.63075945973996,},
{lat: 49.60796996822443,lng: -114.69667742848996,},
{lat: 49.365312750537264,lng: -114.54286883473996,},
{lat: 49.16457379673784,lng: -114.32314227223996,},
{lat: 49.006277171847884,lng: -114.03749774098996,},
{lat: 49.006277171847884,lng: -118.32216570973996,},
{lat: 50.67811779969527,lng: -118.76161883473996,},
{lat: 50.90036619383935,lng: -119.17909930348996,},
{lat: 51.27301719532304,lng: -119.24501727223996,},
{lat: 51.73801778342651,lng: -119.99208758473996,},
{lat: 52.06340079866863,lng: -120.62929461598996,},
{lat: 53.051880298851295,lng: -121.42031024098996,},
{lat: 53.642131204305656,lng: -121.50820086598996,},
{lat: 53.96652504956991,lng: -121.39833758473996,},
{lat: 53.85003235231229,lng: -120.89296649098996,},
{lat: 54.01819533504684,lng: -120.71718524098996,},
{lat: 53.94066585809387,lng: -120.51943133473996,},
{lat: 53.96652504956991,lng: -120.21181414723996,},
],ecoprovince_color: "#ff5c39",ecoprovince_number: "7",},{coordinates: [
{lat: 59.98588260845872,lng: -120.00307391286496,},
{lat: 58.17426638323401,lng: -120.07448504567746,},
{lat: 57.886329746606364,lng: -120.75014422536496,},
{lat: 57.26487712236609,lng: -121.24452899098996,},
{lat: 56.85717254009257,lng: -122.42830584645871,},
{lat: 56.41460103683937,lng: -123.69997332692746,},
{lat: 56.545041100148644,lng: -124.33168719411496,},
{lat: 58.845671225405795,lng: -125.28749774098996,},
{lat: 59.0750981531521,lng: -125.82033465505246,},
{lat: 59.33103269703009,lng: -125.81484149098996,},
{lat: 59.21877022482654,lng: -125.28749774098996,},
{lat: 59.96939197738577,lng: -124.99086688161496,},
],ecoprovince_color: "#0072ce",ecoprovince_number: "2",},{coordinates: [
{lat: 60.00648434948935,lng: -138.94281695485714,},
{lat: 59.96251845677592,lng: -125.12201617360715,},
{lat: 59.31842163931944,lng: -125.36371539235715,},
{lat: 59.36323970090299,lng: -125.84711382985715,},
{lat: 59.04261812874566,lng: -125.98993609548215,},
{lat: 58.92940472351955,lng: -125.72626422048215,},
{lat: 58.83288048953665,lng: -125.42963336110715,},
{lat: 56.5192919808868,lng: -124.39691851735715,},
{lat: 56.397884490975954,lng: -124.14423297048215,},
{lat: 56.31266818442398,lng: -123.85858843923215,},
{lat: 56.111046782930565,lng: -124.30902789235715,},
{lat: 56.2245892814454,lng: -124.54265902639035,},
{lat: 56.31952296133079,lng: -124.84220812917356,},
{lat: 56.532926048035016,lng: -125.50722430348996,},
{lat: 56.18601485213979,lng: -126.00160906911496,},
{lat: 56.26541294550116,lng: -126.56191180348996,},
{lat: 56.38116060170182,lng: -127.26503680348996,},
{lat: 56.435866022873824,lng: -127.83632586598996,},
{lat: 56.02058493352684,lng: -128.58339617848995,},
{lat: 58.14528707099235,lng: -131.74745867848995,},
{lat: 59.08356615238177,lng: -132.40663836598995,},
{lat: 59.46525973830106,lng: -133.46132586598995,},
{lat: 59.86476043730796,lng: -135.52675555348995,},
{lat: 59.73212222998143,lng: -137.28456805348995,},
{lat: 59.48757925086794,lng: -137.50429461598995,},
{lat: 59.48757925086794,lng: -138.07558367848995,},
],ecoprovince_color: "#f57eb6",ecoprovince_number: "1",},{coordinates: [
{lat: 58.16847240891252,lng: -120.01406024098996,},
{lat: 54.082693057558835,lng: -120.05800555348996,},
{lat: 54.28841359438042,lng: -120.89296649098996,},
{lat: 54.798247462412135,lng: -121.33241961598996,},
{lat: 55.10109694960116,lng: -122.56288836598996,},
{lat: 55.57595438788555,lng: -123.17812274098996,},
{lat: 56.33855755304408,lng: -123.79335711598996,},
{lat: 57.27675705332938,lng: -121.06874774098996,},
{lat: 57.8658827479649,lng: -120.67323992848996,},
],ecoprovince_color: "#aff1a6",ecoprovince_number: "3",},{coordinates: [
{lat: 59.451852702086924,lng: -137.44674257054572,},
{lat: 59.68279317886817,lng: -137.29018739476447,},
{lat: 59.796288401909216,lng: -135.25497010960822,},
{lat: 59.46720503891628,lng: -133.53835634007697,},
{lat: 59.06294869957231,lng: -132.52212098851447,},
{lat: 58.47266633727414,lng: -132.05382875218635,},
{lat: 58.15491674815312,lng: -131.81968263402229,},
{lat: 57.91025854501116,lng: -131.47567323460822,},
{lat: 56.01811970222575,lng: -128.83895448460822,},
{lat: 55.173934268684825,lng: -128.09188417210822,},
{lat: 53.925133087864445,lng: -127.65243104710822,},
{lat: 52.7709593004901,lng: -126.68563417210822,},
{lat: 51.476002392451925,lng: -125.45516542210822,},
{lat: 50.36798595209431,lng: -122.42293885960822,},
{lat: 49.03220414903295,lng: -121.01668885960822,},
{lat: 49.1005857674645,lng: -121.96700624242072,},
{lat: 49.383900802437644,lng: -122.00820497288947,},
{lat: 49.669146948822885,lng: -122.27462342992072,},
{lat: 50.157289712186525,lng: -124.35103944554572,},
{lat: 50.36448198378618,lng: -125.18050721898322,},
{lat: 50.49395655317468,lng: -125.96602967992072,},
{lat: 50.11503858647007,lng: -126.15829042210822,},
{lat: 49.376748319273666,lng: -125.14754823460822,},
{lat: 48.40523764327361,lng: -123.82918885960822,},
{lat: 48.714261315886006,lng: -124.75204042210822,},
{lat: 49.147318977138205,lng: -125.98250917210822,},
{lat: 49.86074785186667,lng: -127.47664979710822,},
{lat: 50.786585627941726,lng: -128.26766542210822,},
{lat: 50.647465694549766,lng: -126.86141542210822,},
{lat: 51.55804150794432,lng: -128.00399354710822,},
{lat: 52.58445201728108,lng: -129.14657167210822,},
{lat: 53.45674674730831,lng: -130.46493104710822,},
{lat: 53.87334731844221,lng: -130.33309510960822,},
{lat: 54.84634139946444,lng: -130.59676698460822,},
{lat: 55.173934268684825,lng: -130.15731385960822,},
{lat: 56.09173658116079,lng: -130.72860292210822,},
{lat: 57.39296894252407,lng: -132.61825135960822,},
{lat: 58.695287216239635,lng: -133.98055604710822,},
{lat: 59.306358415710584,lng: -135.03524354710822,},
{lat: 59.66337741513248,lng: -135.56258729710822,},
{lat: 59.552214261748574,lng: -136.17782167210822,},
{lat: 59.17150123655672,lng: -136.61727479710822,},
{lat: 59.08129988410302,lng: -137.62801698460822,},
],ecoprovince_color: "#97d700",ecoprovince_number: "5",},{coordinates: [
{lat: 55.99996134272922,lng: -128.55651732461666,},
{lat: 56.31810407537906,lng: -127.76550169961665,},
{lat: 56.08587443441282,lng: -125.96374388711665,},
{lat: 56.275430550433974,lng: -125.70007201211665,},
{lat: 56.512576866967606,lng: -125.52429076211665,},
{lat: 56.04907796156286,lng: -124.24987669961665,},
{lat: 56.25712730713173,lng: -123.81042357461665,},
{lat: 55.64199395147058,lng: -123.32702513711665,},
{lat: 55.0548214055515,lng: -122.57995482461665,},
{lat: 54.77063891653854,lng: -121.47033568399165,},
{lat: 54.46529521507507,lng: -121.18469115274165,},
{lat: 54.18980908996048,lng: -120.73425169961665,},
{lat: 54.035246120785104,lng: -120.25085326211665,},
{lat: 54.086831146347684,lng: -120.71777220742915,},
{lat: 53.931883773369854,lng: -121.03088255899165,},
{lat: 54.00942957802028,lng: -121.48132201211665,},
{lat: 53.80231989732989,lng: -123.06335326211665,},
{lat: 54.086831146347684,lng: -124.86511107461665,},
{lat: 54.490828083740176,lng: -126.22741576211665,},
{lat: 54.49720881065222,lng: -126.84265013711665,},
{lat: 54.99814537076915,lng: -127.29308959024165,},
{lat: 55.10513284336343,lng: -127.36999388711665,},
{lat: 55.20556597747684,lng: -127.58972044961665,},
{lat: 55.130264836906846,lng: -127.98522826211665,},
],ecoprovince_color: "#827a04",ecoprovince_number: "4",},];
const mapOptions = {
 zoom: 5,
 center: { lat: 53.7267, lng: -126.6476 }, // Centered on BC
 mapTypeId: "terrain",
 mapTypeControl: false, // Disable map and satellite options
 fullscreenControl: false, // Disable fullscreen control
 scrollwheel: false, // Disable mouse scroll zoom
 styles: [{
  featureType: "all",
  elementType: "all",
  stylers: [
  { saturation: -100 }, // This makes the map greyscale
],},{
  featureType: "administrative.province",
  elementType: "labels",
  stylers: [{ visibility: "off" }],},],};
 const map = new google.maps.Map(document.getElementById("map"), mapOptions);
 // Add the overlay that covers the entire map
 const outerBounds = [
 new google.maps.LatLng(85, 180),
 new google.maps.LatLng(85, 90),
 new google.maps.LatLng(85, 0),
 new google.maps.LatLng(85, -90),
 new google.maps.LatLng(85, -180),
 new google.maps.LatLng(0, -180),
 new google.maps.LatLng(-85, -180),
 new google.maps.LatLng(-85, -90),
 new google.maps.LatLng(-85, 0),
 new google.maps.LatLng(-85, 90),
 new google.maps.LatLng(-85, 180),
 new google.maps.LatLng(0, 180),
 new google.maps.LatLng(85, 180),];
 const overlayPolygon = new google.maps.Polygon({
  paths: [outerBounds],
  strokeColor: "#000000",
  strokeOpacity: 0.0,
  strokeWeight: 0,
  fillColor: "#FFFFFF",
  fillOpacity: 1.0,
  zIndex: -100,});

  overlayPolygon.setMap(map);

  addEcoZones();

// Function to calculate the centroid of a polygon
function calculateCentroid(path) {
 let lat = 0,
 lng = 0;
 path.forEach((point) => {
  lat += point.lat();
  lng += point.lng();
 });
 lat /= path.length;
 lng /= path.length;
 return new google.maps.LatLng(lat, lng);
}

 // Function to fetch and display eco zones
 function addEcoZones() {
  // Assuming you have a global variable with eco zones data for BC
  for (let index = 0; index < ecoZonesData.length; index++) {
   const zone = ecoZonesData[index];
   console.log("zone.ecoprovince_number", zone.ecoprovince_number);
   console.log("zone", zone);
   const zoneCoordinates = zone.coordinates.map((coord) => new google.maps.LatLng(coord.lat, coord.lng));

   // Define the polygon for the eco zone
   const ecoZonePolygon = new google.maps.Polygon({
 paths: zoneCoordinates,
 strokeOpacity: 1,
 strokeWeight: 3,
 fillColor: zone.ecoprovince_color,
 fillOpacity: 0,
   });

   ecoZonePolygon.setMap(map);

   // Add the eco zone coordinates as a hole in the overlayPolygon
   let paths = overlayPolygon.getPaths();
   // Simplify coordinates for testing
   console.log("Before push paths:", zone);
   paths.push(new google.maps.MVCArray(zoneCoordinates));
   overlayPolygon.setPaths(paths);

   // Calculate the centroid of the polygon
   const centroid = calculateCentroid(zoneCoordinates);

   // Add a marker or label at the centroid
   const marker = new google.maps.Marker({
position: centroid,
map: map,
label: {text: zone.ecoprovince_number.toString(),color: "#003D4C",fontSize: "16px",fontWeight: "bold",},
icon: {path: google.maps.SymbolPath.CIRCLE,scale: 8.5,fillColor: "#FFF",fillOpacity: 1,strokeWeight: 0,},});

 // Add mouseover event listener for the polygon
 ecoZonePolygon.addListener("mouseover", function (event) {
  const hoverBoolColor = ecoZonesData[index].related && indexTitle === -1 && ecoZonesData[index].species;

  ecoZonePolygon.setOptions({
   fillColor: zone.ecoprovince_color,
   fillOpacity: 1, // You can also adjust the fill opacity if needed
  });
 });

 // Add mouseout event listener for the polygon to reset the fill color
 ecoZonePolygon.addListener("mouseout", function (event) {
  switch (true) {
   default:
ecoZonePolygon.setOptions({fillColor: zone.ecoprovince_color,});
  }

  ecoZonePolygon.setOptions({fillOpacity: 0.35, // Reset the fill opacity if needed
  });
 });
}
}
}
initMap();

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk", v: "beta"});</script>
  </body>
</html>