There is such a code (for unknown reasons, the snippet does not launch it)

function initMap() { const point = {lat: 49.985, lng: 36.23}; const map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: point }); const markers = []; const points = [point, point, point]; for (let i = 0; i < points.length; i++) { const marker = new google.maps.Marker({ position: points[i] }); markers.push(marker); }; const markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://github.com/googlemaps/js-marker-clusterer/raw/gh-pages/images/m' }); const res = new google.maps.Marker({ map: map, position: point, icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, fillColor: "green", fillOpacity: 1, scale: 7, strokeWeight: 1, }, zIndex: 100 }); } 
 #map { height: 400px; width: 400px; background-color: grey; } 
 <script src="https://github.com/googlemaps/js-marker-clusterer/raw/gh-pages/src/markerclusterer.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> <div id="map"></div>

It displays three markers at one point, the first two being clustered using the js-marker-clusterer library.

Problem: I want to display a nonclustered marker on top of the cluster. To do this, I specify it zIndex: 100 . But it still displays under the cluster. How to raise it up?

enter image description here

PS If someone knows how to make the snippet work, edit the message

1 answer 1

As suggested by enSO, the problem lies in the fact that the objects are displayed in different layers.

On the map, by default, there are five layers

  1. mapPane - displaying map tiles
  2. overlayLayer - displaying polygons, polygons, any additional surface tiles
  3. markerLayer - marker display
  4. overlayMouseTarget - the layer that receives DOM events
  5. floatPane - display of any information windows

All layers are located one above the other. markers are displayed on layer 3, and clusters on the fourth. Therefore, they will always be located above the markers.

The solution to the problem is to create your own layer, which will be higher than overlayMouseTarget and add markers to it.

How to figure out how to add markers to a new layer - I’ll add an answer