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/