We're using Google Maps for Angular in our application. We're implementing clustering. It seems by default to place the clusters over top the non-clustered markers. We want to place them behind the markers. I've googled for solutions to this problem and there are plenty of hits for classic Google Maps, and there's even some for the OLD version of Google Maps for Angular (where the tag is agm-map), but nothing for the current version of Google Maps for Angular (where the tag is google-map): https://timdeschryver.dev/blog/google-maps-as-an-angular-component.
Setting z-index doesn't work. With classic Google Maps, they say to grab hold of the layer in the map containing the clusters and move it beneath the layer containing the unclustered markers. Is there an equivalent to this for Google Maps for Angular?
Here's our code:
<google-map
#map
height="100%"
width="100%"
[zoom]="zoom"
[center]="center"
[options]="mapOptions">
<!-- clustered markers -->
<map-marker-clusterer imagePath="assets/img/clusters/cluster_green">
<map-marker
#marker="mapMarker"
*ngFor="let site of okSitesBound"
[position]="site.position"
[title]="site.displayName"
[icon]="site.pinIcon"
fit="true"
[options]="okPinOptions"
(mapClick)="markerClicked(marker, site)"
(mapMouseover)="enableMouseover ? markerClicked(marker, site) : null">
</map-marker>
</map-marker-clusterer>
<!-- unclustered markers -->
<map-marker
#marker="mapMarker"
*ngFor="let site of notOkSitesBound"
[position]="site.position"
[title]="site.displayName"
[icon]="site.pinIcon"
fit="true"
[options]="notOkPinOptions"
(mapClick)="markerClicked(marker, site)"
(mapMouseover)="enableMouseover ? markerClicked(marker, site) : null">
</map-marker>
^ Is there anything I would have to change here to place the clusters behind the other markers? Is there something I can do in Javascript?
Thanks!