Q: Multiple Geojson source layer ordering problem in google maps I tried to load multiple geojson file to my google maps and all of them are shown. But the way the google maps show them is really random.
Here is my concept:


*

*I have a polygon which i intended making as a base layer that suppose to appear first.

*I have other polygon and linestring which will dynamically change from database and suppose to show on top of the base layer.
Sometimes the base layer will appear on top and vice versa. And other times, some of the linestring appear at the bottom of the base layer while some others at the top. Is there any way to order how the geojson layer appear?
I found similar problem: KML Layers rendering order google maps
but, that is for kml not geojson.
var map;
var src = '<?php echo base_url() ?>assets/map_files/global/barudt.json';

function initMap() {
map = new google.maps.Map(document.getElementById('googlemapsBorders'), {
    center: new google.maps.LatLng(-0.7, 115.2422315),
    zoom: 9,
    mapTypeId: 'roadmap'
});

var infoWindows = new google.maps.InfoWindow({
    disableAutoPan: true
});
var infoJalan = new google.maps.InfoWindow();

map.data.loadGeoJson(src);
map.data.setStyle(function(feature) {
    var color = feature.getProperty('color');

    return /** @type {!google.maps.Data.StyleOptions} */ ({
        fillColor: color,
        strokeColor: color,
        strokeWeight: 2
    });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', true);
});


map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {
        strokeWeight: 5
    });

    var title = event.feature.getProperty('Name');
    var lt = parseFloat(event.feature.getProperty('lat'));
    var lg = parseFloat(event.feature.getProperty('lng'));

    infoWindows.setContent(title);
    infoWindows.setPosition({
        lat: lt,
        lng: lg
    });
    infoWindows.open(map);
});

map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
    infoWindows.close();
});


var jalan = JSON.parse(`<?php echo $detail; ?>`);
var jembatan = JSON.parse(`<?php echo $jembatan_detail; ?>`);
var infoWindow = new google.maps.InfoWindow(),
    marker, i;
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
console.log(jalan);
console.log(jembatan);
console.log(infoWindowContent);


jalanLayer = new google.maps.Data({
    map: map,
    style: {
        strokeColor: 'red',
        strokeWeight: 5
    }
});

for (i = 0; i < jalan.length; i++) {
    jalanLayer[i] = new google.maps.Data({
        map: map,
        style: {
            strokeColor: 'red',
            strokeWeight: 3,
            fillColor: 'blue'
        }
    });

    jalanLayer[i].loadGeoJson('<?php echo base_url('
        assets / map_files / ') ?>' + jalan[i][1]);

    var lt;
    var lg;

    jalanLayer[i].addListener('click', function(event) {
        //alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
        lt = parseFloat(event.latLng.lat());
        lg = parseFloat(event.latLng.lng());
        console.log(event.latLng.lat() + ',' + event.latLng.lng());
    });

    google.maps.event.addListener(jalanLayer[i], 'click', (function(nama, i) {
        return function() {

            var title;
            jalanLayer[i].forEach(function(feature) {


                title = "<div id=content>\n\
                                    <div id=bodyContent>\n\
                                    <table><tr><td>Nama Ruas Jalan</td><td>:</td><td><b>" + jalan[i][2] + "</b></td></tr><tr><td>Status Ruas Jalan</td><td>:</td><td><b>" + jalan[i][4] + "</b></td></tr><tr><td>Fungsi Ruas Jalan</td><td>:</td><td><b>" + jalan[i][3] + "</b></td></tr></table></div></div>";
            });




            infoJalan.setContent(title);
            infoJalan.setPosition({
                lat: lt,
                lng: lg
            });
            infoJalan.open(map);

            map.setZoom(14);
            map.setCenter(infoJalan.getPosition());
        };
    })(jalanLayer[i], i));

    google.maps.event.addListener(jalanLayer[i], 'mouseover', (function(nama, i) {
        return function() {
            jalanLayer[i].setStyle({
                strokeColor: 'yellow'
            });
        };
    })(jalanLayer[i], i));

    google.maps.event.addListener(jalanLayer[i], 'mouseout', (function(nama, i) {
        return function() {
            jalanLayer[i].setStyle({
                strokeColor: 'red'
            });
        };
    })(jalanLayer[i], i));



}


for (i = 0; i < jembatan.length; i++) {
    if (jembatan[i][4]) {
        var icon = {
            url: 'https://dispupr.baritoutarakab.go.id/assets/map_icon/jembatan.png',
            scaledSize: new google.maps.Size(40, 40)
        };
        var position = new google.maps.LatLng(jembatan[i][2], jembatan[i][3]);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            icon: icon,
            title: jembatan[i][1]
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            };
        })(marker, i));
    }
}

var area = new google.maps.Data({
    map: map
});
area.loadGeoJson('<?php echo base_url() ?>assets/map_files/area/danau_butong.geojson');
area.setStyle({
    fillColor: 'blue',
    strokeColor: 'blue',
    strokeWeight: 2
});

area.addListener('click', function(event) {
    lt = parseFloat(event.latLng.lat());
    lg = parseFloat(event.latLng.lng());
    console.log(event.latLng.lat() + ',' + event.latLng.lng());
});

}


A: The DataLayer supports setting the zIndex on the Polygons in the styling function.
You didn't provide your GeoJSON, but using Google's example data, you could do something like this:
    map.data.setStyle(function(feature) {
      var color = 'gray';
      var letter = feature.getProperty('letter')
      var zIndex = 0;
      if (letter) {
        zIndex = 1;
        if (feature.getProperty('isColorful')) {
          color = feature.getProperty('color');
        }
      }
      return /** @type {!google.maps.Data.StyleOptions} */({
        fillColor: color,
        strokeColor: color,
        strokeWeight: 2,
        zIndex: zIndex
      });
    });

proof of concept fiddle

code snippet:


html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: {
        lat: -28,
        lng: 137
      }
    });
    map.addListener('click', function(evt) {
      console.log(evt.latLng.toUrlValue(6));
    })
    // Load GeoJSON.
    map.data.addGeoJson(googleJson);
    map.data.addGeoJson(googleBigPolygonJson);

    // Color each letter gray. Change the color when the isColorful property
    // is set to true.
    map.data.setStyle(function(feature) {
      var color = 'gray';
      var letter = feature.getProperty('letter')
      var zIndex = 0;
      if (letter) {
        zIndex = 1;
        if (feature.getProperty('isColorful')) {
          color = feature.getProperty('color');
        }
      }
      return /** @type {!google.maps.Data.StyleOptions} */ ({
        fillColor: color,
        strokeColor: color,
        strokeWeight: 2,
        zIndex: zIndex
      });
    });

    // When the user clicks, set 'isColorful', changing the color of the letters.
    map.data.addListener('click', function(event) {
      event.feature.setProperty('isColorful', true);
    });

    // When the user hovers, tempt them to click by outlining the letters.
    // Call revertStyle() to remove all overrides. This will use the style rules
    // defined in the function passed to setStyle()
    map.data.addListener('mouseover', function(event) {
      map.data.revertStyle();
      if (event.feature.getProperty('letter'))
        map.data.overrideStyle(event.feature, {
          strokeWeight: 8
        });
    });

    map.data.addListener('mouseout', function(event) {
      map.data.revertStyle();
    });
  }
  var googleJson = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
          "letter": "G",
          "color": "blue",
          "rank": "7",
          "ascii": "71"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [123.61, -22.14],
              [122.38, -21.73],
              [121.06, -21.69],
              [119.66, -22.22],
              [119.00, -23.40],
              [118.65, -24.76],
              [118.43, -26.07],
              [118.78, -27.56],
              [119.22, -28.57],
              [120.23, -29.49],
              [121.77, -29.87],
              [123.57, -29.64],
              [124.45, -29.03],
              [124.71, -27.95],
              [124.80, -26.70],
              [124.80, -25.60],
              [123.61, -25.64],
              [122.56, -25.64],
              [121.72, -25.72],
              [121.81, -26.62],
              [121.86, -26.98],
              [122.60, -26.90],
              [123.57, -27.05],
              [123.57, -27.68],
              [123.35, -28.18],
              [122.51, -28.38],
              [121.77, -28.26],
              [121.02, -27.91],
              [120.49, -27.21],
              [120.14, -26.50],
              [120.10, -25.64],
              [120.27, -24.52],
              [120.67, -23.68],
              [121.72, -23.32],
              [122.43, -23.48],
              [123.04, -24.04],
              [124.54, -24.28],
              [124.58, -23.20],
              [123.61, -22.14]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "letter": "o",
          "color": "red",
          "rank": "15",
          "ascii": "111"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [128.84, -25.76],
              [128.18, -25.60],
              [127.96, -25.52],
              [127.88, -25.52],
              [127.70, -25.60],
              [127.26, -25.79],
              [126.60, -26.11],
              [126.16, -26.78],
              [126.12, -27.68],
              [126.21, -28.42],
              [126.69, -29.49],
              [127.74, -29.80],
              [128.80, -29.72],
              [129.41, -29.03],
              [129.72, -27.95],
              [129.68, -27.21],
              [129.33, -26.23],
              [128.84, -25.76]
            ],
            [
              [128.45, -27.44],
              [128.32, -26.94],
              [127.70, -26.82],
              [127.35, -27.05],
              [127.17, -27.80],
              [127.57, -28.22],
              [128.10, -28.42],
              [128.49, -27.80],
              [128.45, -27.44]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "letter": "o",
          "color": "yellow",
          "rank": "15",
          "ascii": "111"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [131.87, -25.76],
              [131.35, -26.07],
              [130.95, -26.78],
              [130.82, -27.64],
              [130.86, -28.53],
              [131.26, -29.22],
              [131.92, -29.76],
              [132.45, -29.87],
              [133.06, -29.76],
              [133.72, -29.34],
              [134.07, -28.80],
              [134.20, -27.91],
              [134.07, -27.21],
              [133.81, -26.31],
              [133.37, -25.83],
              [132.71, -25.64],
              [131.87, -25.76]
            ],
            [
              [133.15, -27.17],
              [132.71, -26.86],
              [132.09, -26.90],
              [131.74, -27.56],
              [131.79, -28.26],
              [132.36, -28.45],
              [132.93, -28.34],
              [133.15, -27.76],
              [133.15, -27.17]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "letter": "g",
          "color": "blue",
          "rank": "7",
          "ascii": "103"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [138.12, -25.04],
              [136.84, -25.16],
              [135.96, -25.36],
              [135.26, -25.99],
              [135, -26.90],
              [135.04, -27.91],
              [135.26, -28.88],
              [136.05, -29.45],
              [137.02, -29.49],
              [137.81, -29.49],
              [137.94, -29.99],
              [137.90, -31.20],
              [137.85, -32.24],
              [136.88, -32.69],
              [136.45, -32.36],
              [136.27, -31.80],
              [134.95, -31.84],
              [135.17, -32.99],
              [135.52, -33.43],
              [136.14, -33.76],
              [137.06, -33.83],
              [138.12, -33.65],
              [138.86, -33.21],
              [139.30, -32.28],
              [139.30, -31.24],
              [139.30, -30.14],
              [139.21, -28.96],
              [139.17, -28.22],
              [139.08, -27.41],
              [139.08, -26.47],
              [138.99, -25.40],
              [138.73, -25.00],
              [138.12, -25.04]
            ],
            [
              [137.50, -26.54],
              [136.97, -26.47],
              [136.49, -26.58],
              [136.31, -27.13],
              [136.31, -27.72],
              [136.58, -27.99],
              [137.50, -28.03],
              [137.68, -27.68],
              [137.59, -26.78],
              [137.50, -26.54]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "letter": "l",
          "color": "green",
          "rank": "12",
          "ascii": "108"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [140.14, -21.04],
              [140.31, -29.42],
              [141.67, -29.49],
              [141.59, -20.92],
              [140.14, -21.04]
            ]
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "letter": "e",
          "color": "red",
          "rank": "5",
          "ascii": "101"
        },
        "geometry": {
          "type": "Polygon",
          "coordinates": [
            [
              [144.14, -27.41],
              [145.67, -27.52],
              [146.86, -27.09],
              [146.82, -25.64],
              [146.25, -25.04],
              [145.45, -24.68],
              [144.66, -24.60],
              [144.09, -24.76],
              [143.43, -25.08],
              [142.99, -25.40],
              [142.64, -26.03],
              [142.64, -27.05],
              [142.64, -28.26],
              [143.30, -29.11],
              [144.18, -29.57],
              [145.41, -29.64],
              [146.46, -29.19],
              [146.64, -28.72],
              [146.82, -28.14],
              [144.84, -28.42],
              [144.31, -28.26],
              [144.14, -27.41]
            ],
            [
              [144.18, -26.39],
              [144.53, -26.58],
              [145.19, -26.62],
              [145.72, -26.35],
              [145.81, -25.91],
              [145.41, -25.68],
              [144.97, -25.68],
              [144.49, -25.64],
              [144, -25.99],
              [144.18, -26.39]
            ]
          ]
        }
      }
    ]
  }
  var googleBigPolygonJson = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [115.950195, -19.358593],
            [151.80957, -19.68994],
            [155.413086, -28.73469],
            [148.645508, -36.426384],
            [116.477539, -36.849535],
            [113.665039, -24.252746],
            [115.950195, -19.358593]
          ]
        ]
      }
    }]
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>


