In Firefox, Basic polygon only visible after dragging; disappears again when changing map zoom

Question

In Firefox on Ubuntu, using current Google Maps JS API (v3), and I'm trying to add polygon shapes to a map.

(Demo + code further down)

Problem: When adding a shape, it exists but is not visible. I know the shape exists because I see the mouse cursor change when hovering where the shape should be. The shape does become instantly visible as soon as I drag it. It becomes invisible again if I change the map zoom level.

Another interesting thing, when adding multiple shapes (by clicking a "Load" button multiple times in my demo), after the first instance (which is invisible), adding subsequent shapes makes them all visible. However, when changing map zoom, they all return to an invisible state (but still exist, and are draggeable).

Goal: In Firefox on Ubuntu, to have visible shapes on the map at all times, unless I explicitly hide/delete them on my own accord.

---

A) The shape exists, but is invisible

B) As soon as you drag the invisible shape, it becomes visible

When changing map zoom, the shape returns to (A) invisible.

---

Demo: https://codepen.io/MarsAndBack/pen/rNgjKwm

Ignore the Google Map warning "This page can't load Google Maps correctly."; everything works enough for this demo.

Button "Load basic polygon" pans to the Bermuda triangle and adds a basic Google Maps polygon.

Button "Load geojson polygon" pans to New Mexico, and adds an arbitrary GeoJSON polygon just above Blue Creek OHV Area.

var map = new google.maps.Map(document.getElementById("map1"), {
  mapId: 'DEMO_MAP_ID',
  center: { lat: 24.3366734, lng: -75.2085759 },
  zoom: 5.25,
  gestureHandling: 'greedy'
})

const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")

btn1.addEventListener("click", () => loadPolygon_Basic())
btn2.addEventListener("click", () => loadPolygon_GeoJSON())

function loadPolygon_Basic() {
  
  const shape_basic = new google.maps.Polygon({
    paths: [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 }
    ],
    strokeColor: "red",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "lime",
    fillOpacity: 1, 
    visible: true,
    clickable: true,
    draggable: true,
  })
  
  map.setCenter({ lat: 24.3366734, lng: -75.2085759 })
  map.setZoom(5.25)

  shape_basic.setMap(map)
}

function loadPolygon_GeoJSON() {

  const shape_geojson = {
    "type":"Feature",
    "geometry":{
      "type":"Polygon",
      "coordinates":[[[-101.69092517560932,35.760800520027736],[-101.69195514387104,35.73391165725278],[-101.6404567307851,35.73377231306736],[-101.64406161970112,35.764004286494796],[-101.69092517560932,35.760800520027736]]]
    },
    "properties":{}
  }
  
  map.setCenter({ lat: 35.7697449, lng: -101.6806657 })
  map.setZoom(12)
  map.data.addGeoJson(shape_geojson)

  map.data.setStyle({
    fillColor: "green",
    strokeWeight: 1,
    clickable: true,
    draggable: true,
  })
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 4em;
  padding: 1px;
}

header div {
  
}

h1 {
font-size: 1em;
}

button {
  font-size: 1rem;
  padding: 1px;
}

#map1 {
  flex: 1;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<header>
  <h1>Google Maps<br />polygon test</h1>
  
  <div>
    <div>Bermuda triangle</div>
    <button id="btn1">Load basic polygon</button>
  </div>
  
  <div>
    <div>New Mexico; arbitrary</div> 
    <button id="btn2">Load geojson polygon</button>
  </div>
</header>

<div id="map1"></div>

Answer 1

Set shape style a moment after adding it to the map

Found a trick that seems to work, barring any better solution.

After adding a shape, whether it's basic polygon or GeoJSON, set the shape styles a moment after adding the shape to the map. This seems to force Firefox to properly render the shape.

Basic shape

 //...
 shape_basic.setMap(map)
 //...


setTimeout( () => {
   shape_basic.setOptions({         
    strokeColor: "red",
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: "lime",
    fillOpacity: 1, 
    visible: true,
    clickable: true,
    draggable: true,
   })
  }, 200)

GeonJSON shape

// ...  
map.data.addGeoJson(shape_geojson)
// ...
  setTimeout( () => {
    map.data.setStyle({
    fillColor: "green",
    strokeWeight: 1,
    clickable: true,
    draggable: true,
    })
  }, 200)