javascript - googlemap イベントから map-canvas div の外にあるオブジェクトを更新する

Question

この質問が以前にされていたら申し訳ありませんが、見つけられませんでした。

だから私は、マーカー表示のオンとオフを切り替える簡単なチェックボックスを備えたグーグルマップを持っています。このチェックボックスは「map-canvas」div の外にあります。

これはすべて正常に機能しますが、私の問題は次のとおりです。マイページの読み込み時にマーカーが表示されないため、チェックボックスがオフになっています。

私が問題を抱えているのは、ズームレベルが十分に大きい（> 4）ときにマーカーを自動的に表示しようとしていることです。これも問題なく動作し、ユーザーがレベル 4 を超えてズームインすると、マーカーが自動的にオンになります。ただし、これが発生した場合は、マーカー チェックボックスも自動的にオンにする必要がありますが、うまくいきませんでした。どのように js でチェックボックス オブジェクトを参照しようとしても、「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>

具体的には、document.getElementById("CheckBoxMarkers") は、zoom_changed イベントから toggleMarkers が呼び出されるたびに null になります。

どうすればこれを乗り越えることができますか?