How do I set the z-index of a marker in Google Maps API v3

Question

Can anyone explain the exact syntax used to set the z-index for a marker using the Google Maps API (Version 3)?

score 71 · Accepted Answer · edited Nov 23 '15 at 10:49

71

var marker = new google.maps.Marker({ 
    ....
    zIndex: 100 
});

Or via the Marker setter:

marker.setZIndex(100);

edited Nov 23 '15 at 10:49

Ankh

5,478
3
36
40

answered Jan 26 '12 at 19:27

ori

7,817
1
27
31

1

does 100 move it closer to the user or farther away? – Phlip May 17 '14 at 03:08
1

For anyone not familiar with z-index, it is a CSS property for height layering. It is not related to distance, and is not specific to Google Maps. I am using it to make markers of a particular type draw "on top" of other markers when multiple markers overlap. – Daniel Nalbach Aug 04 '15 at 17:29
@Phlip: the value (of 100) is relative, not absolute. Items with a value of 100 appear to be 'under' items with a higher value (which will appear to be closer to the user), but 'above' items with a lower value. – Jochem Schulenklopper Mar 21 '17 at 08:53

score 4 · Answer 2 · edited Mar 21 '17 at 09:33

zIndex is actually a relative term. For example, if you have two markers, marker1 and marker2, and the zIndex of marker1 is 100 and the zIndex of marker2 is 101: it means that marker2 is higher in the stack than marker1. As a result, marker2 will be on top or marker1, and in front of the user.

You can set the z-index using :

var marker=new google.maps.Marker({
    position: myCenter,
    map: map,
    zIndex: 100
});

If you have previously created a marker, then just use:

marker.setZIndex(101);

How do I set the z-index of a marker in Google Maps API v3

2 Answers2