Google Maps API Javascript-为一个标记组切换两个不同的标记

我有一张谷歌地图，上面有两组标记；让我们称它们为groupA（红色标记）和groupB（紫色标记）。我在我的页面上有一个复选框来打开/关闭这两组标记。我想在组合中添加第三个标记（灰色标记），它将与groupA一起显示。我试着做了一些我认为很明显的改变，但对这个新手来说运气不好。灰色标记只停留在地图上，不使用GroupA标记进行开关。我相信这很容易解决。谢谢你的帮助

以下是我的javascript以及我尝试的更改：

    <script>        
        var markerGroups = {
    "GroupA": [],
    "GroupB": []
    "GroupC": []
};
var customIcons = {
// Maps Icons Collection https://mapicons.mapsmarker.com
    GroupA: {
        icon: '/icon_red.png'
    },
    GroupB: {
        icon: '/icon_purple.png'
    },
    GroupC: {
        icon: '/icon_grey.png'
    }
};
var map;
function load() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40.357250, -75.272855),
        zoom: 7,
        mapTypeId: 'terrain',
        gestureHandling: 'greedy',

        mapTypeControl: true,
          mapTypeControlOptions: {
              style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
              position: google.maps.ControlPosition.TOP_LEFT
          },
          zoomControl: true,
          zoomControlOptions: {
              position: google.maps.ControlPosition.TOP_LEFT
          },
          fullscreenControl: true,
          fullscreenControlOptions: {
              position: google.maps.ControlPosition.TOP_RIGHT
          },
          scaleControl: true,
          streetViewControl: false,
          streetViewControlOptions: {
              position: google.maps.ControlPosition.TOP_LEFT
          },
          fullscreenControl: true



    });
    var infoWindow = new google.maps.InfoWindow();
    // downloadUrl("phpsqlajax_genxml.php", function(data) {
    var xml = parseXml(xmlStr); // data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng")));
        bounds.extend(point);
        var type = markers[i].getAttribute("type");
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon
        });
        markerGroups[type].push(marker);
        bindInfoWindow(marker, map, infoWindow, html);
    }
    // });
    map.fitBounds(bounds);
}

function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function () {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
    });
}

function downloadUrl(url, callback) {
    var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;

    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };

    request.open('GET', url, true);
    request.send(null);
}

function doNothing() {}

function toggleGroup(type) {
    for (var i = 0; i < markerGroups[type].length; i++) {
        // alert(markerGroups[type][i]);
        var marker = markerGroups[type][i];
        if (!marker.getVisible()) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    }
}
google.maps.event.addDomListener(window, 'load', load);

function parseXml(str) {
    if (window.ActiveXObject) {
        var doc = new ActiveXObject('MicrosoftXMLDOM');
        doc.loadXML(str);
        return doc;
    } else if (window.DOMParser) {
        return (new DOMParser).parseFromString(str, 'text/xml');
    }
}

var xmlStr = '<markers><marker name="This is a red marker" address="" lat="" lng="" type="GroupA"/><marker name="This is a purple maker" address="" lat="" lng="" type="GroupB"/><marker name="This is a grey marker " address="" lat="" lng="" type="GroupC"/></markers>';

var markerGroups={
“A组”：[]，
“B组”：[]
“C组”：[]
};
var customIcons={
//地图图标集https://mapicons.mapsmarker.com
A组：{
图标：'/icon_red.png'
},
B组：{
图标：'/icon_purple.png'
},
C组：{
图标：'/icon_grey.png'
}
};
var映射；
函数加载（）{
map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（40.357250，-75.272855），
缩放：7，
mapTypeId:'地形'，
手势处理：'贪婪'，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.HORIZONTAL_BAR，
位置：google.maps.ControlPosition.TOP_左
},
动物控制：对，
ZoomControl选项：{
位置：google.maps.ControlPosition.TOP_左
},
全屏控制：正确，
全屏控制选项：{
位置：google.maps.ControlPosition.TOP\u右
},
scaleControl：对，
街景控制：错误，
街景控制选项：{
位置：google.maps.ControlPosition.TOP_左
},
fullscreenControl:true
});
var infoWindow=new google.maps.infoWindow（）；
//下载URL（“phpsqlajax_genxml.php”，函数（数据）{
var xml=parseXml（xmlStr）；//data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
var bounds=new google.maps.LatLngBounds（）；
对于（var i=0；i“+地址；
var icon=customIcons[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
MarkerGroup[类型]。推送（标记）；
bindInfoWindow（标记、地图、infoWindow、html）；
}
// });
映射边界（bounds）；
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记，'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var request=window.ActiveXObject？新的ActiveXObject（'Microsoft.XMLHTTP'）：新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
功能切换组（类型）{
对于（var i=0；i

这是HTML：

<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA', 'GroupC')" CHECKED/>GroupA

<input type="checkbox" id="GroupB" onclick="toggleGroup('GroupB')" CHECKED/>GroupB

<div id="map"></div>

GroupA
B组

您可以使用数组

HTML

GroupA
B组

JS

功能切换组（类型）{
type.forEach（元素=>{
对于（var i=0；i

如果您总是希望GroupC与GroupA切换，只需在单击复选框时调用

toggleGroup（'GroupA'）

和

toggleGroup（'GroupC'）

：

<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA');toggleGroup('GroupC')" CHECKED/>GroupA

GroupA
B组

完美！非常感谢。

 function toggleGroup(type) {
    type.forEach(element => {
        for (var i = 0; i < markerGroups[element].length; i++) {
            alert(markerGroups[element][i]);
            var marker = markerGroups[element][i];
            if (!marker.getVisible()) {
                marker.setVisible(true);
            } else {
                marker.setVisible(false);
            }
        }
    });
}

<input type="checkbox" id="GroupA" onclick="toggleGroup('GroupA');toggleGroup('GroupC')" CHECKED/>GroupA