Question

I have a Google V3 map which uses steetView and some map markers.
The little yellow streetView pegman sits on the map on top of the markers.
Is there a way to change the z-indexes so that my markers will be above the pegman
(so that they can be easlly clicked on without having to zoom in)?

In case anything is not clear, here is a fiddle….
http://jsfiddle.net/spiderplant0/BRkCA/

After a bit of experimenting I came up with this…

$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});

This forces the pegman to sit beneath the markers but now the pegman is no longer dragable and each time the map is moved etc, the pegman jumps above the markers again.

Answer 1

To keep the pegman under your markers you can watch for the pov_changed event and reset the z-index after a short delay

$google.maps.event.addListener(panorama, 'pov_changed', function() {
    var func=function(){
        $("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
    }
    setTimeout(func,1000);
    }
});

You will also need to change the depth of the pegman after the maps moves, which can be accomplished with the following snippet

google.maps.event.addListener(map, 'idle', function() {
                google.maps.event.trigger(panorama, 'pov_changed');
    })

If you want to be able to drag the pegman, you must first place it above the markers by having a toggle button swap the pegman’s depth and add an exception to the pov_changed event handler preventing the pagman from dropping depths when the toggle button is active.