Javascript 如何从地图外部触发谷歌地图标记

我有这个HTML:

<ul class="google-map__trigger">
<li data-id="marker-1" class="google-map__trigger-item">Trigger Marker 1</li>
<li data-id="marker-2" class="google-map__trigger-item">Trigger Marker 2</li> 
</ul>
<div id="google-map" class="google-map"></div>

// Infowindow, latitude, longitude
var locations = [
    ['<div class="google-map__infowindow"><h4>Lervig Brygge</h4><p>Her ligger Lervig Brygge.</p></div>', 58.96746,5.765269],
    ['<div class="google-map__infowindow"><h4>Regn</h4><p>I denne rundkjøringen regner det. Det regner alltid i denne rundkjøringen. Det er litt av et naturfenomen!</p></div>', 58.96579,5.759518]
];

// Icons are located in this folder
var iconURLPrefix = '/_themes/prototype/graphics/icons/';

// Icons are named
var icons = [
    iconURLPrefix + 'location.svg',
    iconURLPrefix + 'weather-rain.svg',
]

// Map options
var map = new google.maps.Map(document.getElementById('google-map'),
    {
        zoom: 16,
        center: new google.maps.LatLng(58.966222, 5.762930),
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        scrollwheel: false,
        navigationControl: false,
        scaleControl: false,
        zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
});

var infowindow = new google.maps.InfoWindow({
    maxWidth: 200
});

var marker;
var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon : icons[iconCounter]
});

markers.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
    }

    })(marker, i));

    iconCounter++;

}

function AutoCenter() {
    // Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
        // Go through each...
        $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
    });
    // Fit these bounds to the map
    map.fitBounds(bounds);
}
AutoCenter();

触发标记1
触发标记2

我有这个JS:

<ul class="google-map__trigger">
<li data-id="marker-1" class="google-map__trigger-item">Trigger Marker 1</li>
<li data-id="marker-2" class="google-map__trigger-item">Trigger Marker 2</li> 
</ul>
<div id="google-map" class="google-map"></div>

// Infowindow, latitude, longitude
var locations = [
    ['<div class="google-map__infowindow"><h4>Lervig Brygge</h4><p>Her ligger Lervig Brygge.</p></div>', 58.96746,5.765269],
    ['<div class="google-map__infowindow"><h4>Regn</h4><p>I denne rundkjøringen regner det. Det regner alltid i denne rundkjøringen. Det er litt av et naturfenomen!</p></div>', 58.96579,5.759518]
];

// Icons are located in this folder
var iconURLPrefix = '/_themes/prototype/graphics/icons/';

// Icons are named
var icons = [
    iconURLPrefix + 'location.svg',
    iconURLPrefix + 'weather-rain.svg',
]

// Map options
var map = new google.maps.Map(document.getElementById('google-map'),
    {
        zoom: 16,
        center: new google.maps.LatLng(58.966222, 5.762930),
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        scrollwheel: false,
        navigationControl: false,
        scaleControl: false,
        zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
});

var infowindow = new google.maps.InfoWindow({
    maxWidth: 200
});

var marker;
var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon : icons[iconCounter]
});

markers.push(marker);

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
    }

    })(marker, i));

    iconCounter++;

}

function AutoCenter() {
    // Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
        // Go through each...
        $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
    });
    // Fit these bounds to the map
    map.fitBounds(bounds);
}
AutoCenter();

//信息窗口、纬度、经度
变量位置=[
[Lervig Brygge她的利格尔·Lervig Brygge.
，58.96746,5.765269]，
['RegnI denne rundkøringen regner det.det regner alltid I denne rundkøringen.det er litt av et naturfenomen！
”，58.96579,5.759518]
];
//图标位于该文件夹中
var iconURLPrefix='/_themes/prototype/graphics/icons/'；
//图标被命名为
变量图标=[
iconURLPrefix+'location.svg'，
iconURLPrefix+“weather rain.svg”，
]
//地图选项
var map=new google.maps.map（document.getElementById（'google-map'），
{
缩放：16，
中心：新google.maps.LatLng（58.966222,5.762930），
mapTypeControl:false，
街景控制：错误，
泛控制：错误，
滚轮：错误，
导航控制：错误，
scaleControl:false，
ZoomControl选项：{
位置：google.maps.ControlPosition.LEFT_底部
}
});
var infowindow=new google.maps.infowindow({
最大宽度：200
});
var标记；
var markers=新数组（）；
var-iconCounter=0；
//将标记和信息窗口添加到地图
对于（var i=0；i

如何使用上面HTML中的列表从Google地图外部触发地图标记？我已经看到了解决这个问题的不同方法，但我还没有设法使它与我的代码一起工作

谢谢你的帮助

参考：

或者，如果它们没有特定的顺序

//using your id data attribute
$('.google-map__trigger-item').each(function(){
    $(this).on('click', function(){
        var id = parseInt($(this).data('id').split('-')[1]) -1;
        google.maps.event.trigger(markers[id], 'click');
    });
});

2019年更新： 这是一个香草版本，加一些ES6语法糖

[...document.querySelectorAll('.google-map__trigger-item')].map((el, i) => {
    el.addEventListener('click', () => {
        google.maps.event.trigger(markers[i], 'click');
    });
});

同样（不需要外部库）：

HTML

---

您是否正在使用（或是否可以使用）JQuery？此解决方案需要JQuery。非常感谢！工作就像一个符咒：）

function OpenInfowindowForMarker(index) {
    google.maps.event.trigger(markers[index], 'click');
}