Javascript 在谷歌地图中打开/关闭标记

我是JavaScript新手，刚刚业余拼凑了以下代码。它可能有很多问题，但目前似乎对我有效

我正在尝试为我的标记创建切换按钮，因此有一个按钮显示/隐藏“饮料”标记，一个按钮显示/隐藏“乐队”标记等等

var drinks = [
    ["Drinks Station #3", 51.49811, -0.06743],
    ["Drinks Station #4", 51.49652, -0.04596],
    ["Drinks Station #1", 51.50626, -0.01049],
    ["Drinks Station #2", 51.50726, -0.05505]
];

var bands = [
    ["<b>West End Musical Choir</b>", 51.50962, -0.05531],
    ["<b>Gugge 2000</b>", 51.51056, -0.04172],
    ["<b>Cyclehoop Music Bike</b>", 51.50848, -0.02247],
    ["<b>Manorfield Primary Steel Band</b>", 51.50682, -0.01061],
    ["<b>Batala London</b>", 51.50441, -0.01718],
    ["<b>The Dhol Company</b>", 51.50547, -0.0419],
    ["<b>South London Jazz Orchestra</b>", 51.49909, -0.05595],
    ["<b>Pantasy Steel Band</b>", 51.49855, -0.06921],
    ["<b>The Blend Choir</b>", 51.49617, -0.04101],
    ["<b>DJ Truck</b>", 51.49536, -0.04538],
    ["<b>Nostalgia Steel Band</b>", 51.48771, -0.03764],
    ["<b>Popchoir</b>", 51.48135, -0.02522],
    ["<b>Hosenbrass (Roaming)</b>", 51.48192, -0.00957]
];

var relay = [
    ["<b>Relay Exchange #1</b>", 51.50309, -0.01992],
    ["<b>Relay Exchange #2</b>", 51.50886, -0.03309],
    ["<b>Relay Exchange #3</b>", 51.49904, -0.05727]
];

var start = [
    ["<b>The Vitality Big Half Start</b>", 51.50921, -0.0673663]
];

var finish = [
    ["<b>The Vitality Big Half & The Little Half Finish</b>", 51.48291, -0.00989]
];

function initGoogleMap() {

    var infowindow = new google.maps.InfoWindow();

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(51.49789, -0.03441),
        styles: [{
            elementType: 'geometry',
            stylers: [{
                color: '#ebe7f0'
            }]
        }, {
            elementType: 'labels.text.stroke',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#DADADA'
            }]
        }, {
            featureType: 'administrative.locality',
            elementType: 'labels.text.fill',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            featureType: 'administrative.neighborhood',
            elementType: 'labels.text.fill',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            featureType: 'administrative.neighborhood',
            elementType: 'labels.text.stroke',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            featureType: 'poi',
            elementType: 'labels.text.fill',
            stylers: [{
                visibility: 'off'
            }],
        }, {
            featureType: 'poi',
            elementType: 'labels.icon',
            stylers: [{
                visibility: 'off'
            }],
        }, {
            featureType: 'poi.park',
            elementType: 'geometry',
            stylers: [{
                visibility: 'off'
            }]
        }, {
            featureType: 'poi.park',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#c2b5d1'
            }]
        }, {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'road',
            elementType: 'geometry.stroke',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'road',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#c2b5d1'
            }]
        }, {
            featureType: 'road.highway',
            elementType: 'geometry',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'road.highway',
            elementType: 'geometry.stroke',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'road.highway',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#c2b5d1'
            }]
        }, {
            featureType: 'transit',
            elementType: 'geometry',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'transit.station',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#000000'
            }]
        }, {
            featureType: 'transit.station.rail',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#000000'
            }]
        }, {
            featureType: 'water',
            elementType: 'geometry',
            stylers: [{
                color: '#d6cde0'
            }]
        }, {
            featureType: 'water',
            elementType: 'labels.text.fill',
            stylers: [{
                color: '#c2b5d1'
            }]
        }, {
            featureType: 'water',
            elementType: 'labels.text.stroke',
            stylers: [{
                color: '#c2b5d1'
            }]
        }]
    });

    var icon = {
        url: "icon_link", // url
        scaledSize: new google.maps.Size(30, 30), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };

    var iconTwo = {
        url: "icon_link", // url
        scaledSize: new google.maps.Size(30, 30), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(15, 15) // anchor
    };

    var iconThree = {
        url: "icon_link", // url
        scaledSize: new google.maps.Size(30, 30), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(0, 0) // anchor
    };

    var iconStart = {
        url: "icon_link", // url
        scaledSize: new google.maps.Size(36, 60), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(18, 60) // anchor
    };

    var iconFinish = {
        url: "icon_link", // url
        scaledSize: new google.maps.Size(36, 60), // scaled size
        origin: new google.maps.Point(0, 0), // origin
        anchor: new google.maps.Point(18, 60) // anchor
    };

    function placeMarker(loc) {
        var latLng = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: icon,
            zIndex: 1
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); // Close previously opened infowindow
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
    }

    function placeMarkerTwo(loc) {
        var latLng = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: iconTwo,
            zIndex: 1,
            type: bands
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); // Close previously opened infowindow
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
    }

    function placeMarkerThree(loc) {
        var latLng = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: iconThree,
            zIndex: 1
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); // Close previously opened infowindow
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
    }

    function placeMarkerStart(loc) {
        var latLng = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: iconStart,
            zIndex: 1
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); // Close previously opened infowindow
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
    }

    function placeMarkerFinish(loc) {
        var latLng = new google.maps.LatLng(loc[1], loc[2]);
        var marker = new google.maps.Marker({
            position: latLng,
            map: map,
            icon: iconFinish,
            zIndex: 1,
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.close(); // Close previously opened infowindow
            infowindow.setContent("<div id='infowindow'>" + loc[0] + "</div>");
            infowindow.open(map, marker);
        });
    }

    for (var i = 0; i < drinks.length; i++) {
        placeMarker(drinks[i]);
    }

    for (var i = 0; i < bands.length; i++) {
        placeMarkerTwo(bands[i]);
    }

    for (var i = 0; i < relay.length; i++) {
        placeMarkerThree(relay[i]);
    }

    for (var i = 0; i < start.length; i++) {
        placeMarkerStart(start[i]);
    }

    for (var i = 0; i < finish.length; i++) {
        placeMarkerFinish(finish[i]);
    }

    var ctaLayer = new google.maps.KmlLayer(
        'route_Link', {
            suppressInfoWindows: false,
            map: map,
            preserveViewport: true
        });

    var ctaLayer = new google.maps.KmlLayer(
        'Park_Link', {
            suppressInfoWindows: false,
            map: map,
            preserveViewport: true
        });
}

google.maps.event.addDomListener(window, 'load', initGoogleMap);

var=[
[“饮料站#3”，51.49811，-0.06743]，
[“饮料站4”，51.49652，-0.04596]，
[“饮料站#1”，51.50626，-0.01049]，
[“饮料站#2”，51.50726，-0.05505]
];
var波段=[
[“西区音乐合唱团”，51.50962，-0.05531]，
[“Gugge 2000”，51.51056，-0.04172]，
[“Cyclehoop音乐自行车”，51.50848，-0.02247]，
[“马诺菲尔德一次钢带”，51.50682，-0.01061]，
[“巴塔拉伦敦”，51.50441，-0.01718]，
[“Dhol公司”，51.50547，-0.0419]，
[“南伦敦爵士乐团”，51.49909，-0.05595]，
[“Pantasy钢带”，51.49855，-0.06921]，
[“混合唱诗班”，51.49617，-0.04101]，
[“DJ卡车”，51.49536，-0.04538]，
[“怀旧钢带”，51.48771，-0.03764]，
[“Popchoir”，51.48135，-0.02522]，
[“霍森布拉斯（漫游）”，51.48192，-0.00957]
];
无功继电器=[
[“中继交换#1”，51.50309，-0.01992]，
[“中继交换#2”，51.50886，-0.03309]，
[“中继交换#3”，51.49904，-0.05727]
];
变量开始=[
[“活力大半开始”，51.50921，-0.0673663]
];
变量完成=[
[“活力大半边&小半边”，51.48291，-0.00989]
];
函数initGoogleMap（）{
var infowindow=new google.maps.infowindow（）；
var map=new google.maps.map（document.getElementById（'map-canvas'）{
缩放：14，
中心：新google.maps.LatLng（51.49789，-0.03441），
风格：[{
elementType:“几何体”，
样式：[{
颜色：“#ebe7f0”
}]
}, {
elementType:'labels.text.stroke'，
样式：[{
能见度：“关闭”
}]
}, {
elementType:'labels.text.fill'，
样式：[{
颜色：“#达达”
}]
}, {
featureType:“administrative.Location”，
elementType:'labels.text.fill'，
样式：[{
能见度：“关闭”
}]
}, {
featureType:“管理。邻居”，
elementType:'labels.text.fill'，
样式：[{
能见度：“关闭”
}]
}, {
featureType:“管理。邻居”，
elementType:'labels.text.stroke'，
样式：[{
能见度：“关闭”
}]
}, {
featureType:“poi”，
elementType:'labels.text.fill'，
样式：[{
能见度：“关闭”
}],
}, {
featureType:“poi”，
elementType:“labels.icon”，
样式：[{
能见度：“关闭”
}],
}, {
功能类型：“poi.park”，
elementType:“几何体”，
样式：[{
能见度：“关闭”
}]
}, {
功能类型：“poi.park”，
elementType:'labels.text.fill'，
样式：[{
颜色：“#c2b5d1”
}]
}, {
功能类型：“道路”，
elementType:“几何体”，
样式：[{
颜色：“#d6cde0”
}]
}, {
功能类型：“道路”，
elementType:'geometry.stroke'，
样式：[{
颜色：“#d6cde0”
}]
}, {
功能类型：“道路”，
elementType:'labels.text.fill'，
样式：[{
颜色：“#c2b5d1”
}]
}, {
功能类型：“道路.公路”，
elementType:“几何体”，
样式：[{
颜色：“#d6cde0”
}]
}, {
功能类型：“道路.公路”，
elementType:'geometry.stroke'，
样式：[{
颜色：“#d6cde0”
}]
}, {
功能类型：“道路.公路”，
elementType:'labels.text.fill'，
样式：[{
颜色：“#c2b5d1”
}]
}, {
featureType:“transit”，
elementType:“几何体”，
样式：[{
颜色：“#d6cde0”
}]
}, {
featureType:“transit.station”，
elementType:'labels.text.fill'，
样式：[{
颜色：'#000000'
}]
}, {
featureType:“transit.station.rail”，
elementType:'labels.text.fill'，
样式：[{
颜色：'#000000'
}]
}, {
功能类型：“水”，
elementType:“几何体”，
样式：[{
颜色：“#d6cde0”
}]
}, {
功能类型：“水”，
elementType:'labels.text.fill'，
样式：[{
颜色：“#c2b5d1”
}]
}, {
功能类型：“水”，
elementType:'labels.text.stroke'，
样式：[{
颜色：“#c2b5d1”
}]
}]
});
变量图标={
url:“图标链接”//url
scaledSize:new google.maps.Size（30,30），//缩放大小
原点：新的google.maps.Point（0,0），//原点
锚点：新的google.maps.Point（0，0）//锚点
};
var iconTwo={
url:“图标链接”//url
scaledSize:new google.maps.Size（30,30），//缩放大小
原点：新的google.maps.Point（0,0），//原点
anchor:new google.maps.Point（15,15）//anchor
};
var Icontree={
url:“图标链接”//url
scaledSize:new google.maps.Size（30,30），//缩放大小
来源：新谷歌
   function toggleBars(){
    bars.forEach(bar => {
        bar.setVisible(!bar.getVisible())
    })
   }