Google maps Javascript - z-index of geojson layer

by katalin_2003

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

CSS

html,
body,
#map-canvas {
	height: 100%;
	width: 100%;
	margin: 50px 50px, 0px, 0px;
	padding: 0px;
}

JavaScript

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

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

 initialize();

 function initialize() {
   var map;
   var myStyle = [{
       "featureType": "road",
       "stylers": [{
         "visibility": "off"
       }]
     },
     {
       "featureType": "landscape",
       "stylers": [{
         "visibility": "off"
       }]
     }
   ];

   // Create a simple map.
   map = new google.maps.Map(document.getElementById('map-canvas'), {
     zoom: 12,
     center: new google.maps.LatLng(28.666767, -98.367298),
     // Applying custome mapType to gantt.
     mapTypeId: 'mystyle'
   });

   // Creating custome stlye for map and adding it into mapTypes.
   map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, {
     name: 'My Style'
   }));

   map.data.addGeoJson(json);

   map.data.setStyle(styleFeature);

   map.data.addListener('mouseover', function(event) {
     map.data.overrideStyle(event.feature, {
       // can comment icon to use default markers
       icon: {
       	 path: google.maps.SymbolPath.CIRCLE,
         strokeWeight: 4,
         strokeColor: 'white',
         fillColor: 'red',
         fillOpacity: 1.0,
         scale: 27,
         labelOrigin: {
           x: 0,
           y: -2
         }
       },
       label: {
         text: ('Point: ' + event.feature.getId()),
         fontWeight: 'bold',
         color: '#303030',
         bacgroundColor: '#FFFFFF'
       },
       zIndex: 5
       // zIndex: ++zIndex	// csa: unreliable
     });
    ...