Search code examples
google-mapsgoogle-maps-api-3google-maps-markersgoogle-maps-api-2

Google Maps: How can I change the z-index of a Marker?


There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).


Solution

  • Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:

    var pt = new GLatLng(42.2659, -83.74861);
    var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
    map.addOverlay(marker);
    

    I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.

    var pt1 = new GLatLng(42.2659, -83.74861);
    var pt2 = new GLatLng(42.3000, -83.74000);
    var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
    var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
    map.addOverlay(marker1);
    map.addOverlay(marker2);
    
    function specialMarker() {
      return 9999;
    }
    
    function normalMarker() {
      return Math.floor(Math.random()*1000);
    }