Укажите z-индекс маркеров Google Map

У меня есть карта Google с большим количеством маркеров, добавленных с помощью websockets. Я использую пользовательские изображения маркеров на основе доступности данных. Я хочу убедиться, что новейший маркер остается поверх всех других элементов на карте.

Как мне это сделать?

Код:

circleIcon = { path: google.maps.SymbolPath.CIRCLE, fillColor: "blue", fillOpacity: 1, scale: 2, strokeColor: "red", strokeWeight: 10 }; coordinates = image[2].split(','); pin=new google.maps.LatLng(coordinates[0], coordinates[1]); if(marker) { marker.setMap(null); } if(image[0] != "NOP") { var markerIcon = circleIcon; } else { var markerIcon = image_car_icon; } marker=new google.maps.Marker({ position:pin, icon:markerIcon }); marker.setMap(map); map.setCenter(marker.getPosition()); 

Обновить

Я использую jquery для обновления z-индекса InfoWindow, например:

 popup = new google.maps.InfoWindow({ content:'', }); popup.open(map, marker); google.maps.event.addListener(popup, 'domready', function() { console.log("DOM READY..........................."); // Bring latest Image to top e = $('#pin_' + pin_count).parent().parent().parent().parent(); e.css({ 'z-index' : 99999 + pin_count, }); }); 

Возможно, именно поэтому маркер показывает за InfoWindow. Я попробовал обновление с помощью zIndex, но маркер все еще показывает за InfoWindow:

 marker=new google.maps.Marker({ position:pin, zIndex: 9999999 + pin_count, icon:markerIcon }); 

Обновить

Образец кода. Я ожидаю, что маркер значка «зеленого круга» окажется за маркером значка «pin».


       var london = new google.maps.LatLng(51.508742,-0.120850); function initialize() { var pin1=new google.maps.LatLng(51.508742, -0.120850); var pin2=new google.maps.LatLng(51.508642, -0.120850); var mapProp = { center:pin1, zoom:17, disableDefaultUI:true, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); var marker=new google.maps.Marker({ position:pin2, zIndex:99999999 }); marker.setMap(map); var infowindow = new google.maps.InfoWindow({ content:"Hello World!" }); infowindow.open(map,marker); circleIcon = { path: google.maps.SymbolPath.CIRCLE, fillColor: "blue", fillOpacity: 1, scale: 2, strokeColor: "green", strokeWeight: 10 }; var marker2=new google.maps.Marker({ position:pin1, icon:circleIcon, zIndex:99999 }); marker2.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize);    

По умолчанию карта сделает z-индекс выше для маркеров ниже на карте, чтобы они заметно стекали сверху вниз

Вы можете установить опцию zIndex для маркера. Вам просто нужно создать инкремент счетчика zIndex при добавлении маркеров и добавить его к объекту опций маркера:

 marker=new google.maps.Marker({ position:pin, icon:markerIcon, zIndex: counterValue }); 

Я не совсем уверен, какая базовая стартовая ценность должна быть

Вы должны установить опцию «оптимизирован» в false в сочетании с опцией zIndex.

 var marker=new google.maps.Marker({ position:pin2, optimized: false, zIndex:99999999 }); 

Это должно решить вашу проблему.

Задача решена. Просто установите zValue на 999 (я предполагаю, что выше вернет его больше), и он должен подняться на вершину. Я думаю, что значение по умолчанию ниже 999:

 var zValue; if (someCondition) { zValue = 999; } var marker = new google.maps.Marker({ map: map, position: {lat: lat, lng: lng}, title: titleString, icon: image, zIndex: zValue }); 

Позаботьтесь о том, что, как говорится в документации по карте google, z-индекс круга будет сравниваться с z-индексом других полигонов, а не с z-индексом маркеров.