Place custom marker over markerclusterer

Question

I'm using google maps api 3 along with agm (angular google maps) to place a lot of custom markers on the map. Some of these markers are low priority so i've implemented clustering (using markerClusterer) on those markers to help with performance.

However the higher priority markers need to always be above the clusters, currently clusters appear to be on their own layer and that layer is always above the markers layer.

Is there a way to force clusters and markers to be on the same layer, so I can implement a zIndex? Or at the very least, force the makers layer to be above the clusters layer.

Or alternatively, could we detect if clusters are over markers, and shift the cluster so that it's out of the way.

Answer 1

After working on it for ages, I found the only way to do this is to create a pane so that the getPanes method is available, from there you move the markerLayer (where the markers live) to the overlayMouseTarget, here is a semi working example:

First, set the zIndex of the marker, or markers

marker.setZIndex(9999);
marker.setMap(this.map);

I use a pretty lengthy method of checking json info in order to change the zIndex number, so for this example i'll just say all markers need to be above the cluster, then in any markers that I plan to put into the cluster, I set that marker to 10 and push to an array, then set that array to the markercluster. Now onto the layering:

const overlay = function() {};

overlay.prototype = new google.maps.OverlayView();
overlay.prototype.onAdd = function() {

  const panes = this.getPanes();

  for(let i = 0; i < panes.markerLayer.childNodes.length; i++) {
    panes.overlayMouseTarget.appendChild(panes.markerLayer.childNodes[i]);
  }

  console.log(panes.overlayMouseTarget);
};

const x = new overlay();
x.setMap(this.map); 

With this, this pushes all the markers and cluster into the same dom element, so the zIndex is respected.