Controlling order KML Polygons are drawn using Google Maps API?

Question

I am creating an application that allows users to turn on and off KML layers:

The KML layers are hosted on ArcGIS Online, and I'm bringing them into the application by creating a new KML Layer variable. The KML Layers are then added to an array variable. Finally, the layers are added to the map according to whether the checkbox is toggled on.

Here is the relevant code:

layers = [];

var parcelKML = new google.maps.KmlLayer({
                url: "https://www.arcgis.com/sharing/rest/content/items/3bdd800d59254407b4e115d56fcbc9ec/data",
                map: map,
                pane: "floatPane",
                preserveViewport: true
        });
layers.push(parcelKML);

var municKML = new google.maps.KmlLayer({
            url: "https://www.arcgis.com/sharing/rest/content/items/1dcc6f19f9c24bf689235f0488d8f90a/data",
            map: map,
            pane: "floatPane",
            preserveViewport: true
        });
layers.push(municKML);

for (var i=0; i < layers.length; i++) {
        layers[i].setMap(null);
       };
    };


//Add layers to map using toggle

//Parcels
$(window).ready(function(){
        $(".ui.toggle.parcels input").click(function(){
            checked = $(".ui.toggle.parcels input").is(":checked");
            console.log(checked);
            if(checked === true) {
                layers[0].setMap(map);
            }
            else{
                layers[0].setMap(null);
            }
        });
    });

//Municipalities
$(window).ready(function(){
        $(".ui.toggle.munic input").click(function(){
            checked = $(".ui.toggle.munic input").is(":checked");
            console.log(checked);
            if(checked===true) {
                layers[1].setMap(map);
            }
            else{
                layers[1].setMap(null);
            }
        });
    });

The layers are successfully loading to the map viewer. However, I'd like the Parcels layer to always appear on top. If I toggle this layer on and then toggle on the municipalities layer, the parcels layer is now on bottom.

How would I specify the order in which the KML layers are drawn?

I'm relatively new to the Google Maps API and JavaScript.

Answer 1

The solution was as simple as adding the zIndex parameter when defining each of my KML layers.

For example:

var parcelKML = new google.maps.KmlLayer({
            url: "https://www.arcgis.com/sharing/rest/content/items/3bdd800d59254407b4e115d56fcbc9ec/data",
            map: map,
            pane: "floatPane",
            preserveViewport: true,
            zIndex: 0
         });

var municKML = new google.maps.KmlLayer({
        url: "https://www.arcgis.com/sharing/rest/content/items/1dcc6f19f9c24bf689235f0488d8f90a/data",
        map: map,
        pane: "floatPane",
        preserveViewport: true,
        zIndex: 1
       });

After applying this parameter, my layers now load in the order that I specify.