Javascript 谷歌地图api：按类别划分的多个侧边栏'；不工作（文本不显示）

我想在谷歌地图上创建分类的可点击边栏，但代码不起作用。不显示标记的标题

首先，我制作了一个这样的单行边栏。

然后，我尝试根据我放置的标记的类别按类别分类多个边栏。 如下图所示：

我修改了前面的代码，如下所示，但是数据的文本没有出现。我认为将标记的类别与表框的id进行比较会很好，然后将每个标记分配到右侧的边栏表中，但这不起作用。你能检查一下我的逻辑或代码有错误吗？

var映射；
var gmarkers1=[]；
var markers1=[]；
var side_bar_html0=“”；
var side_bar_html1=“”；
var side_bar_html2=“”；
var i=0；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map-canvas'）{
中心：{lat:37.5515，lng:126.9250}，
缩放：15
});
addMarker（）
}
函数addMarker（）{
console.log（'创建标记'）
var infoWindow=new google.maps.infoWindow（）
geojson_url='stores.json'
//$.getJSON（geojson_url，函数（结果）{
//发布选择到url。
var结果=jsonData；
数据=结果['features']
$。每个（数据、函数（键、值）{
var pos=新的google.maps.LatLng(
parseFloat（val['geometry']['coordinates'][1]），
parseFloat（val['geometry']['coordinates'][0]）；
var title=val['properties']['title']
var content=val['properties']['title']
变量类别=val['properties']['description']
console.log（“title=“+title+”，content=“+content+”，category=“+category”）；
var marker1=新的google.maps.Marker({
职位:pos,，
标题:标题,，
类别：[类别]，
地图：地图，
属性：val['properties']
});
var markerInfo=“+title+”
类别：“+category+”
marker1.addListener（'click'，function（）{
infoWindow.close（）
infoWindow.setContent（markerInfo）
infoWindow.open（地图，标记1）
});
gmarkers1.push（marker1）；
//调用侧边栏类别的id
var id_hansik=$（'#hansik'）.val（）；
var id_jungsik=$（'#jungsik'）.val（）；
var id_yangsik=$（'#yangsik'）.val（）；
//将标记的类别与侧栏表的id进行比较，然后将每个标记分配给右侧侧栏表
函数showcategory（）
{
对于（i=0；i；
else if（markers1[i].category==idjungsik）
侧栏html1+=''+markers1[i]。标题+'
；
else if（markers1[i].category==idyangsik）
侧栏html2+=''+标记1[i]。标题+'
；
}
}
//document.getElementById（“side\u bar”）.innerHTML=side\u bar\u html；
document.getElementById（“sidebar0”）.innerHTML=side\u bar\u html0；
document.getElementById（“sidebar1”）.innerHTML=side\u bar\u html1；
document.getElementById（“sidebar2”）.innerHTML=side\u bar\u html2；
});
//});  
}
功能myclick（i）{
google.maps.event.trigger（gmarkers1[i]，'click'）；
}
updateView=函数（元素）{
if（元素）{
//获取带有复选框名称的数组
checkedboxs=（[…document.querySelectorAll（'input[type=checkbox]：checked'））.map（函数（o）{return o.id；}）；
控制台日志（复选框）；
对于（i=0；i=0；}）{
marker.setVisible（true）；
}
否则{
marker.setVisible（假）；
}
}
}
否则{
console.log（“未给出参数”）；
}
}
$（文档）.ready（函数（）{
$（函数（）{
$（'input[type=“checkbox”]”）。绑定（'click'，function（）{
$（'input[type=“checkbox”]”）。而不是（this）.prop（“checked”，false）；
})
});
});
//初始映射
initMap（）
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}

var jsonData={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[126.9288675,37.5490519]
},
“财产”：{
“说明”：“hansik”，
“标题”：“h_1”，
“标记大小”：“小”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[126.9216405,37.5485891]
},
“财产”：{
“说明”：“hansik”，
“标题”：“h_2”，
“标记大小”：“小”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[126.9201695,37.5524256]
},
“财产”：{
“说明”：“hansik”，
“标题”：“h_3”，
“标记大小”：“小”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[126.922562,37.549561]
},
“财产”：{
“描述”：“jungsik”，
“标题”：“j_1”，
“标记大小”：“小”
}
},
{
“类型”：“功能”，
“几何学”：{
“类型”：“点”，
“坐标”：[126.9187665,37.5519167]
},
“财产”：
//compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
    function showcategory()
    {
        for (i = 0; i < gmarkers1.length; i++){
                if(markers1[i].category == idhansik)
                    side_bar_html0 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                else if(markers1[i].category == idjungsik)
                    side_bar_html1 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';
                else if(markers1[i].category == idyangsik)
                    side_bar_html2 += '<a href="javascript:myclick(' + (gmarkers1.length-1) + ')">' + markers1[i].title + '<\/a><br>';

            }
    }


    //document.getElementById("side_bar").innerHTML = side_bar_html;
    document.getElementById("sidebar0").innerHTML = side_bar_html0;
    document.getElementById("sidebar1").innerHTML = side_bar_html1;
    document.getElementById("sidebar2").innerHTML = side_bar_html2;

//compare the category of marker with the id of sidebar table, and then assign each marker to right sidebar table
function showcategory() {
  for (i = 0; i < gmarkers1.length; i++) {
    if (gmarkers1[i].category == "hansik")
      side_bar_html0 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "jungsik")
      side_bar_html1 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';
    else if (gmarkers1[i].category == "yangsik")
      side_bar_html2 += '<a href="javascript:myclick(' + (i) + ')">' + gmarkers1[i].title + '<\/a><br>';

  }
  //document.getElementById("side_bar").innerHTML = side_bar_html;
  document.getElementById("sidebar0").innerHTML = side_bar_html0;
  document.getElementById("sidebar1").innerHTML = side_bar_html1;
  document.getElementById("sidebar2").innerHTML = side_bar_html2;
}