Javascript 按地图外部列表中的位置显示地图标记

我有很多标记，我想在地图外的列表中显示这些标记。如何使用javascript实现这一点？我是Javascript新手，非常感谢您的帮助。下面是我目前使用的代码，除了列出地图标记信息之外，所有这些都按预期工作

我的想法是，根据县下拉列表中选择的选项，将出现一个列表

//List of Counties
var counties = [{
    name: "Armagh",
    code: "am",
    zoom : 8,
    center: {
        lat: 54.274911,
        lng: -6.626583
    }
}, {
    name: "Cork",
    code: "c",
    zoom : 8,
    center: {
        lat: 51.904246,
        lng: -8.474038
    }
}];

//List of Practices
var practice = [{
    name: "Cross Veterinary Clinic",
    position: {
        lat: 54.07531,
        lng: -6.60590
    },
    code: "am",
    address: "8 Dundalk Road, Crossmaglen, Co. Armagh",
    vet: "Carol Peterson",
    programme: ['bvd', 'jd']
}, {
    name: "Keltic Veterinary",
    position: {
        lat: 52.35386,
        lng: -8.68204
    },
    code: "c",
    address: "Charleville Town Centre, Bakers Road, Charleville, Co. Cork",
    vet: "Gerald Gonzales",
    programme: ['cck', 'bvd']
}];


var countyselect = document.getElementById('county')
countyselect.addEventListener("change", onCountySelect); 



//render map


function initialize() {
    var options = {
        center: {
            lat: 53.2734,
            lng: -7.77832031
        },
        zoom: 6.5
    };
    map = new google.maps.Map(document.getElementById('map'), options);
    marker = renderMarker();

}


function renderMarker() {
    for (var i = 0; i < practice.length; i++) {
        var marker = new google.maps.Marker({
            position: practice[i].position,
            title: practice[i].name,
            map: map,
        });
        inforwindow(marker, map);
    }
}

function inforwindow(marker, map) {
    var infowindow = new google.maps.InfoWindow(); {
        google.maps.event.addListener(marker, 'click', function(renderMarker) {
            infowindow.setContent(marker.getTitle());
            infowindow.open(map, marker);
        });
    }
}


 function onCountySelect() {
    let countySelect = document.getElementById("county");
     let selectedCounty = countySelect.options[countySelect.selectedIndex];
     let countyFound = (counties.find(({ name }) => name === selectedCounty.value));
    if (selectedCounty.value === "all") {
        map.setCenter({ lat: 53.2734, lng: -7.77832031 });
        map.setZoom(6.5);
    } else {
        map.setCenter(countyFound.center);
       map.setZoom(countyFound.zoom);
    }
 }


function resultsList() {
  if (selectedCounty.value === "all") {
  let countySelect = document.write(`<h3>${practice.name}</h3><p>${practice.address}</p><p>${practice.vet}</p>`);

  }
}

//县列表
var县=[{
姓名：“阿玛”，
代码：“am”，
缩放：8，
中心：{
拉脱维亚：54.274911，
液化天然气：-6.626583
}
}, {
名称：“软木”，
代码：“c”，
缩放：8，
中心：{
纬度：51.904246，
液化天然气：-8.474038
}
}];
//惯例清单
风险值实践=[{
名称：“跨兽医诊所”，
职位：{
纬度：54.07531，
液化天然气：-6.60590
},
代码：“am”，
地址：“阿尔马州Crossmaglen Dundalk路8号”，
兽医：“卡罗尔·彼得森”，
课程：['bvd'，'jd']
}, {
名称：“凯尔特兽医”，
职位：{
拉脱维亚：52.35386，
液化天然气：-8.68204
},
代码：“c”，
地址：“科克郡查理维尔贝克路查理维尔镇中心”，
兽医：“杰拉尔德·冈萨雷斯”，
课程：['cck'，'bvd']
}];
var countyselect=document.getElementById（'county'）
countyselect.addEventListener（“更改”，onCountySelect）；
//渲染贴图
函数初始化（）{
变量选项={
中心：{
拉脱维亚：53.2734，
液化天然气：-7.77832031
},
缩放：6.5
};
map=new google.maps.map（document.getElementById（'map'），选项）；
marker=renderMarker（）；
}
函数renderMarker（）{
对于（变量i=0；iname==selectedCountry.value））；
如果（selectedCounty.value==“全部”）{
地图设置中心（{纬度：53.2734，液化天然气：-7.77832031}）；
地图设置缩放（6.5）；
}否则{
地图设置中心（countyFound.center）；
map.setZoom（countyFound.zoom）；
}
}
函数resultsList（）{
如果（selectedCounty.value==“全部”）{
让countySelect=document.write（`${practice.name}${practice.address}
${practice.vet}
`）；
}
}

根据您的代码，我根本不确定您的计划中有哪些标记，或者您是否打算让列表中的项目可单击，以便它们在地图上突出显示特定的标记。但在任何情况下，这里的代码都可以按照您的要求执行—在选择一个县时创建相关实践的列表。我加入了一些黑客测试HTML，因为它更容易测试

希望这会让你走上正确的道路

几个注意事项-您使用了backtick，即使用`和${variable}方法来呈现某些内容-这可能无法直接在较旧的浏览器上工作

另外，请原谅单引号和双引号的混合-这是一个品味的问题，但我不认为回去改变你所做的一切有什么意义。祝你好运

地图事物
* {
保证金：0；
填充：0；
框大小：边框框；
}
html，正文{
字体系列：Helvetica；
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
#容器{
弹性：1；
显示器：flex；
}
#选择权{
弹性：1；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
#结果{
边缘顶端：40px；
填充：40px；
}
.结果{
填充：30px；
边框：1px实心#ddd；
}
#地图{
弹性：3；
}
请选择
阿尔马
软木
//县名单
var县=[{
姓名：“阿玛”，
代码：“am”，
缩放：8，
中心：{
拉脱维亚：54.274911，
液化天然气：-6.626583
}
}, {
名称：“软木”，
代码：“c”，
缩放：8，
中心：{
纬度：51.904246，
液化天然气：-8.474038
}
}];
//惯例清单
风险值实践=[{
名称：“跨兽医诊所”，
职位：{
纬度：54.07531，
液化天然气：-6.60590
},
代码：“am”，
地址：“阿尔马州Crossmaglen Dundalk路8号”，
兽医：“卡罗尔·彼得森”，
课程：['bvd'，'jd']
}, {
名称：“凯尔特兽医”，
职位：{
拉脱维亚：52.35386，
液化天然气：-8.68204
},
代码：“c”，
地址：“科克郡查理维尔贝克路查理维尔镇中心”，
兽医：“杰拉尔德·冈萨雷斯”，
课程：['cck'，'bvd']
}];
函数初始化（）{
变量选项={
中心：{
拉脱维亚：53.2734，
液化天然气：-7.77832031
},
缩放：6.5
};
map=new google.maps.map（document.getElementById（'map'），选项）；
var countyselect=document.getElementById（'county'）；
countyselect.addEventListener（'change'，onCountySelect）；
渲染器（）；
}
函数renderMarkers（）{
for（var i=0；i