changing z index of marker on hover to make it visible

Question

I'm trying to make the marker i'm currently hovering on have a greater z-index than the others, so that even if it's hidden by other markers it'll gain full visibility when I hover on it.

On click of any marker i want to do the same .

  google.maps.event.addListener(this.marker, 'mouseover', function() {
            this.old_ZIndex = this.getZIndex(); //trying to get the current z- index
            console.log(this.old_ZIndex); //this is undefined: why?
            this.setZIndex(this.old_ZIndex + 100); //setting a higher z-index than all other  markers
            console.log("the old z index is ",this.old_ZIndex);
        });

But with this i would be infinitely increase the z index .. is there some other way in which I can have the to revert back when i hover or click any other marker . .

Or is there any better way to implement it ??

Answer 1

'this.getZIndex()' always returns 'undefined' if you haven't previously set a zIndex on the marker, either when initialising it in the first place or by using the setOption() function.

Your script may also not work 100% if there are more than 100 markers.

I've put together a very simple map below that contains 2 markers, slightly overlapping. On hover of one of the markers it will set the zIndex to the highest needed to bring it to the top, then return it back to what it was previously on mouseout:

    var map;
    var markers = new Array();
    var highestZIndex = 0;

    function initialize() {

        /* SETUP MAP */
        var myLatlng = new google.maps.LatLng(52.06768, -1.33758);
        var mapOptions = {
            center: myLatlng,
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        /* ADD 1st MARKER */
        var markerOptions = {
            position: new google.maps.LatLng(52.06768, -1.32058), 
            map: map,
            zIndex:1
        };
        marker = createMarker(markerOptions, false);
        marker.set("myZIndex", marker.getZIndex());

        google.maps.event.addListener(marker, "mouseover", function() {
            getHighestZIndex();
            this.setOptions({zIndex:highestZIndex+1});
        });
        google.maps.event.addListener(marker, "mouseout", function() {
            this.setOptions({zIndex:this.get("myZIndex")});
        });

        /* ADD 2nd MARKER */
        var markerOptions = {
            position: new google.maps.LatLng(52.06768, -1.33758), 
            map: map,
            zIndex:2    
        };
        marker = createMarker(markerOptions, false);
        marker.set("myZIndex", marker.getZIndex());

        google.maps.event.addListener(marker, "mouseover", function() {
            getHighestZIndex();
            this.setOptions({zIndex:highestZIndex+1});
        });
        google.maps.event.addListener(marker, "mouseout", function() {
            this.setOptions({zIndex:this.get("myZIndex")});
        });

    }

    function createMarker(markerOptions) {
        var marker = new google.maps.Marker(markerOptions);
        markers.push(marker);
        return marker;
    }

    function getHighestZIndex() {

        // if we haven't previously got the highest zIndex
        // save it as no need to do it multiple times
        if (highestZIndex==0) {
            if (markers.length>0) {
                for (var i=0; i<markers.length; i++) {
                    tempZIndex = markers[i].getZIndex();
                    if (tempZIndex>highestZIndex) {
                        highestZIndex = tempZIndex;
                    }
                }
            }
        }
        return highestZIndex;

    }

Answer 2

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

            google.maps.event.addListener(marker, 'mouseover', function () {
                this.setOptions({zIndex:10});
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
                this.setOptions({zIndex:1});
            });