onclick 隐藏/显示谷歌地图标记答案

【问题标题】：onclick hide/show google map markeronclick 隐藏/显示谷歌地图标记
【发布时间】：2012-10-18 22:25:35
【问题描述】：

我将有几个标记（现在我只做两个，直到我得到结构），我希望能够点击打开标记信息框的外部链接，但是当一个标记的信息框打开，另一个关闭。我还希望能够隐藏和显示标记。因此，当按下一个按钮时，它会隐藏第一个标记，当按下另一个按钮时，它会显示第一个并隐藏第二个。

现在我的地图是这样设置的，但我不确定从这里开始如何切换可见性设置和信息气泡。

var LOC_850 = new google.maps.LatLng(42.326435,-71.149499);


var mapOptions = {
  zoom: 16,
  center: LOC_850,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);


var CONTENT_850 = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    'Heritage Site.</p>'+
    '</div>';

var INFO_850 = new google.maps.InfoWindow({
    content: CONTENT_850
});
var BTN_850 = 'CONTAINER_850';
var MARKER_850 = new google.maps.Marker({
    position: LOC_850,
    map: map,
    title: 'Hello World!'
});
google.maps.event.addListener(MARKER_850, 'click', function() {
  INFO_850.open(map,MARKER_850);
});
google.maps.event.addDomListener(document.getElementById(BTN_850), 'click', function() {
  INFO_850.open(map,MARKER_850);
});





var LOC_850_60bus_out = new google.maps.LatLng(42.326822,-71.150157);
var CONTENT_850_60bus_out = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">DIFFERENT</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
    'south west of the nearest large town, Alice Springs; 450&#160;km '+
    'Heritage Site.</p>'+
    '</div>';

var INFO_850_60bus_out = new google.maps.InfoWindow({
    content: CONTENT_850_60bus_out
});
var BTN_850_60bus_out = 'CONTAINER_850_60bus_out';
var MARKER_850_60bus_out = new google.maps.Marker({
    position: LOC_850_60bus_out,
    map: map,
    title: 'Hello World!'
});
google.maps.event.addListener(MARKER_850_60bus_out, 'click', function() {
  INFO_850_60bus_out.open(map,MARKER_850_60bus_out);
});
google.maps.event.addDomListener(document.getElementById(BTN_850_60bus_out), 'click', 
function() {
  INFO_850_60bus_out.open(map,MARKER_850_60bus_out);
});

}


function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' +
    'callback=initialize';
document.body.appendChild(script);
}

window.onload = loadScript;
</script>

【问题讨论】：

标签： google-maps google-maps-markers

【解决方案1】：

参见[本例“类别”图(http://www.geocodezip.com/v3_MW_example_categories.html)（翻译自Mike Williams' v2 tutorial example

我有

（我称之为）v2 信息窗口功能（单个信息窗口）
隐藏/显示标记类别的复选框。

【讨论】：