单击地图外部的链接时，在地图中获取信息框以显示

Question

我想知道是否有人知道如何使地图下方的“链接”与地图互动（请参见下图）。

假设我要单击George。。比地图中的信息框应该可见。 如果我单击另一个，则该那个应该可见，依此类推。

带有链接的HTML：

<ul>
   <li><a>George</a></li>
   <li><a>Hoppe</a></li>
   <li><a>Café Herengracht</a></li>
</ul>

信息框中的HTML：

<div>
   <div class="infoBox"></div>
// here comes another infobox (when clicked on icon)
// here comes another infobox (when clicked on icon)
// here comes another infobox (when clicked on icon)
// etc..
</div>

现在，仅在地图上单击其他信息框时，其他信息框才不在DOM中。

我不知道在哪里可以找到javascript，如果我不知道我是否可以识别使信息框出现在DOM中的函数。

我正在Avade Wordpress主题中使用此地图简码： https ：//avada.theme-fusion.com/google-maps/

谢谢！

Answer 1

是否需要一次打开多个信息窗口？ 如果没有，我建议只使用一个信息窗口元素。 使用单个信息窗口，您只需监听点击事件，然后单击即可设置信息窗口的位置和内容，然后打开。

Google Maps JavaScript API文档中有一个侦听DOM事件的示例，该示例显示了如何使用地图外部的元素（在您的情况下为地图下方的链接）与地图进行交互。

下面的伪代码显示了有关如何注册“ click”事件侦听器的非常基本的概述，该事件侦听器将更新并显示信息窗口。 有关“ Google地图信息窗口”的更多信息，请查看信息窗口中的示例 。

HTML

<ul>
   <li><a id="mapTriggerGeorge">George</a></li>
</ul>

的JavaScript

var infowindow = new google.maps.InfoWindow({
    content: 'Hello World!'
});

var georgeTrigger = document.getElementById('mapTriggerGeorge');

google.maps.event.addDomListener(georgeTrigger, 'click', function() {
    infoWindow.setContent('Hello World from George!');
    infowindow.open(map, marker);
});