javascript - Updating object outside the map-canvas div from googlemap events

Question

I'm sorry if this question was asked before, but I couldn't find it.

So I have a googlemap, with a simple checkbox that toggles the marker display on and off. This checkbox is outside of the 'map-canvas' div.

This all work fine, however, my issue is the following. When my page load, the markers are not displayed, therefore, the checkbox is not checked.

What I'm having trouble with is that I'm trying to automatically display the marker when the zoom level is big enough (>4). This work fine as well, my markers turn on automatically when the user zoom in past level 4. However, when this happen, I also need the Marker checkbox to become checked automatically, and I have had no luck on this. no matter how i try to reference the checkbox object in js, it just turns up as 'null'.

</script>
<div id="panel">
    Display : <asp:CheckBox ID="CheckBoxHeatMap" runat="server" checked="true" OnClick="javascript:return toggleHeatmap();" /> Heatmap
    <asp:CheckBox ID="CheckBoxMarkers" runat="server" checked="false" OnClick="javascript:return toggleMarkers();"/> Markers
</div>
<div id="map-canvas" style="height: 500px"></div>

<script type="text/javascript">

var map, heatmap, previousZoomLevel = 2;
var markersList = new Array();
var LatlngList = new Array();
var MarkersOn = false;

window.onload = function() {
    var mapOptions = {
        // center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        center: new google.maps.LatLng("0.0", "0.0"),

        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    for (i = 0; i < markers.length; i++) {
        var data = markers[i]
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        var marker = new google.maps.Marker({
            position: myLatlng,
            title: data.title
        });
        LatlngList.push(myLatlng);
        markersList.push(marker);
        (function(marker, data) {
            google.maps.event.addListener(marker, "click", function(e) {
                infoWindow.setContent(data.description);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
    heatmap = new google.maps.visualization.HeatmapLayer({
        data: LatlngList,
        radius: 20
     });
     heatmap.setMap(map);


    google.maps.event.addListener(map, 'zoom_changed', function() {
        var zoomLevel = map.getZoom();
        if (zoomLevel > 4 && previousZoomLevel <= 4 && MarkersOn == false) {

            toggleMarkers();
        };
        previousZoomLevel = zoomLevel
    });

}

    function toggleHeatmap() {
        heatmap.setMap(heatmap.getMap() ? null : map);
        if (CheckBoxHeatMap.checked == true) {
            CheckBoxHeatMap.checked == false;
        }
        else {
            CheckBoxHeatMap.checked == true;
        };



        return false;
    }

    function toggleMarkers() {
        for (i = 0; i < markers.length; i++) {
            if (MarkersOn == true) {
                markersList[i].setMap(null);
            }
            else {
                markersList[i].setMap(map);
            };
        };

        if (MarkersOn == true) {
            MarkersOn = false;
            document.getElementById("CheckBoxMarkers").checked = false;
        }
        else {
            MarkersOn = true;
            document.getElementById("CheckBoxMarkers").checked = true;
        };

        return false;
    }

</script>

To be specific document.getElementById("CheckBoxMarkers") is null whenever toggleMarkers is called from the zoom_changed event.

How can I get past this?