CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-maps
Amar
Amar

Reputation: 1936

Changing z-index for google map data layer point

I have created a google map with circles overlapping each other, while am hovering overlapping circle, z-index of that circle should changes and it should come on top of other circles. There is a way to do this for markers, like in this link " changing z index of marker on hover to make it visible " . But i want to do this for points created by data layer, Here is my fiddle sample

http://jsfiddle.net/8cs97z8h/1/

        var json = {
            "type": "FeatureCollection",
            "features": [

                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.344139,28.629211]
                    }
                },
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.341263,28.629228]
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-98.3412, 28.629]
                    }
                },
            ]
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),      {
                zoom: 12,
                center: new google.maps.LatLng(28.666767, -98.367298),

        });
        map.data.addGeoJson(json);
        map.data.setStyle(styleFeature);

   function styleFeature(feature) {
            return {
                icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    strokeWeight: 2,
                    strokeColor: 'white',
                    fillColor: 'blue',
                    fillOpacity: 1.0,
                    scale: 7
                }
            };
        }

Upvotes: 4

Views: 4484

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

You may use overrideStyle to achieve it.

Set a variable where you store the zIndex and apply this zIndex in the setStyle.

    var zIndex=1;
    //Setting style for markers circles.
    function styleFeature(feature) {
       return {
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                strokeWeight: 2,
                strokeColor: 'white',
                fillColor: 'blue',
                fillOpacity: 1.0,
                scale: 7
            },
             zIndex:zIndex
        };
    }

Then add a mouseover-listener where you increment the zIndex and apply it to the feature:

map.data.addListener('mouseover', function(event) {
       map.data.overrideStyle(event.feature, {zIndex: ++zIndex});
});

Demo: http://jsfiddle.net/8cs97z8h/6/

Upvotes: 9

Related Questions