While creating a Google Map, I encountered an issue where overlapping circles needed their z-index changed upon hover to bring them to the front. I found a solution for markers in this link: changing z index of marker on hover to make it visible. However, I wanted to apply this functionality to points created by a data layer. Here is a sample of my code on JSFiddle:
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
}
};
}