How do you change MapMarker z-index in the Angular Google Maps Component?

With a simple Angular component containing a Google Map, I am unable to change the zIndex of Map Markers. When they are clustered together, I can't bring Markers in the back to the front.

The Angular version is ~11.2.14, and @angular/google-maps is ~11.2.13.

Here is the markup for the Maps instance.

<google-map
    [height]="height"
    [width]="width"
    [center]="center"
    [options]="options"
  >
  <map-marker
    class="marker"
    *ngFor="let marker of markers"
    [position]="marker.position"
    [label]="marker.label"
    [title]="marker.title"
    [options]="marker.options"
  >
  </map-marker>
</google-map>

In the component itself:

export class MapComponent implements OnChanges {
  @Input()
  places: Place[];

  @Input()
  center: google.maps.LatLngLiteral;

  @Input()
  selectedPlace: Place

  height: string = "630px";
  width: string = "700px";
  options: google.maps.MapOptions = {
    mapTypeControl: false,
    fullscreenControl: false,
    zoom: 13,
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 18,
    minZoom: 10,
    streetViewControl: false
  };
  markers: google.maps.Marker[] = [];

  constructor(private cd: ChangeDetectorRef) {}

  ngOnChanges(changes: SimpleChanges) {
    if ('places' in changes) {
      if (this.places.length !== 0) {
        this.createMarkers();
      }
    }
    if ('selectedPlace' in changes) {
      this.highlightPlace(changes['selectedPlace'].previousValue, changes['selectedPlace'].currentValue);
    }
  }

  createMarkers() {
    const _newMarkers: google.maps.Marker[] = [];

    this.places.forEach((place, index) => {
      const marker = new google.maps.Marker({
        position: {
          lat: place.lat,
          lng: place.lng
        },
        clickable: false,
        title: place.name,
        label: {
          className: 'marker-label',
          text: `${place.distance} km away`,
          fontSize: '18px',
          fontWeight: 'bold'
        },
        zIndex: index
      }
      marker.set('options', { icon: "assets/imgs/bubble.svg" });
      marker.set('id', place.id);
      _newMarkers.push(marker);
    }
    this.markers = _newMarkers;
    this.cd.detectChanges();
  }

  highlightPlace(prev: Place | null, current: Place | null) {
    this.markers = this.markers.map((marker => {
      if (prev !== null && prev.id == marker['id']) {
        marker.set('options', { icon: "asset/imgs/bubble.svg" });
        marker.set('label', { ...marker.getLabel(), color: 'black' });
        // marker.setZIndex(1); Doesn't work!
        marker.set('zIndex', 1); Also doesn't work!
      }
      if (current !== null && current.id == marker['id']) {
        marker.set('options', { icon: "asset/imgs/bubble_highlighted.svg" });
        marker.set('label', { ...marker.getLabel(), color: 'white' });
        // marker.setZIndex(1000); Doesn't work!
        marker.set('zIndex', 1000); Also doesn't work!
      }
      return marker;
    });
  }
}

None of these methods of changing the zIndex of a Marker has any effect. When inspecting the elements in Chrome, the zIndex was never set to on creation, or anytime after to what I tried to set it too. It's always some random, large negative number (lower than -100). What am I not understanding? The API says I am able to set the zIndex of Markers, but they do not work.