google.maps.Marker zIndex doesn't work for two icon types - Symbol and String

Question

When I add more Markers to Google Map with different icon types like:

... var marker = new google.maps.Marker({              position: markerLatLng,              map: map,              icon: "http://www.test.com/marker.png",              zIndex: 10          }); ... 

and

... var resultIcon = {             path: google.maps.SymbolPath.CIRCLE,             fillColor: "black",             strokeColor: "black",             strokeWeight: 1,          };  var marker = new google.maps.Marker({              position: markerLatLng,              map: map,              icon: resultIcon,              zIndex: 5          }); ... 

Than the zIndex doesn't work and the Symbol marker appears on the top.

Am I wrong with my code or how can I make the zIndex working?

Answer 1

You have to both specify a zIndex and add

optimized: false 

to every marker constructor, eg.

var marker = new google.maps.Marker({     position: markerLatLng,     map: map,     icon: resultIcon,     optimized: false,     zIndex: 5 }) 

This seems to be an issue with the new canvas based rendering of the markers.

Edit:

This really solves the issue. One thing to mention though is that every marker has to have the "optimized: false" attribute. As long as one marker does not have it, it will not work.

Remove any of the "optimized: false" attributes from LeJared's fiddle and you will encounter the bug.

http://jsfiddle.net/BNWYq/1/

Answer 2

Setting zIndex of the circle to -99 seems to help: http://jsfiddle.net/rq4vs/2/