Есть такой код (по непонятным причинам сниппет его не запускает)
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>
В нем в одну точку выводится три маркера, причем первые два кластеризируются при помощи библиотеки js-marker-clusterer.
Проблема: я хочу некластеризированный маркер вывести поверх кластера. Для этого указываю ему zIndex: 100
. Но он все равно выводит под кластером. Как его поднять наверх?
P.S. Если кто-то знает как заставить работать сниппет - подредактируйте сообщение