Specify the z-index of Google Map Markers

Question

I am having a Google Map with lots of markers added using websockets. I am using custom marker images based on data availability. I want to make sure the newest marker stays

Answer 1

By default map will make z-index higher for markers lower on the map so they visibly stack top to bottom

You can set zIndex option for a marker. You would just need to create a increment zIndex counter as you add markers and add that to the marker options object:

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

I'm not quite sure what the base start value needs to be

Answer 2

You have to set the marker option "optimized" to false in combination with the zIndex option.

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

This should solve your problem.

Answer 3

Problem solved. Just set the zValue to 999 (I'm guessing higher will bring it more to the top) and it should come to the top. I guess the default is below 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
});

Answer 4

Take care that as it says in the google map documentation the z-index of a circle will be compared to the z-index of other polygons and not to the z-index of the markers.