JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js"></script>
Layer1
<input type="checkbox" id="layer_01" checked="checked" />Layer2
<input type="checkbox" id="layer_02" checked="checked" />
<div id="map"></div>
<div id="status"></div>

CSS

body, html, #map {
    height: 100%;
    width: 1005;
}

JavaScript

// layers to toggle 
var layers = [];

layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', {
    preserveViewport: true
});

layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', {
    preserveViewport: true
});

// end layers to toggle 
// intialize 

function initialize() {
    var myLatlng = new google.maps.LatLng(40, -110);
    var mapOptions = {
        zoom: 5,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    loadKml = function (opts, map) {
        var layer = new google.maps.KmlLayer();
        opts.preserveViewport = true;
        if (map) {
            opts.map = map;
        }

        google.maps.event.addListener(layer, 'defaultviewport_changed', function () {
            var map = this.getMap(),
                bounds = map.get('kmlBounds') || this.getDefaultViewport();

            bounds.union(this.getDefaultViewport());
            map.set('kmlBounds', bounds);
            map.fitBounds(bounds);
        });
        layer.setOptions(opts);
        return layer;
    };

    function toggleLayers(i) {
        if (layers[i].getMap() == null) {
            layers[i].setMap(map);
        } else {
            layers[i].setMap(null);
        }
        google.maps.event.addListener(layers[i], 'status_changed', function () {

            document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>";
        });
    }
    // end toggle layers
    google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function (evt) {
        toggleLayers(0);
    });
    google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function (evt) {
        toggleLayers(1);
    });
    // toggle...