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

【问题标题】：Get infobox in map to show up when clicking link outside of the map单击地图外的链接时，获取地图中的信息框以显示
【发布时间】：2016-12-27 19:28:31
【问题描述】：

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

假设我想点击 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/

谢谢！

【问题讨论】：

标签： javascript html wordpress google-maps maps

【解决方案1】：

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

Google Maps JavaScript API documentation 有一个 Listening to DOM events 的示例，它显示了如何与地图外的元素（在您的情况下为地图下方的链接）与地图进行交互。

下面的伪代码显示了有关如何注册“点击”事件侦听器的非常基本的概述，该侦听器会更新并显示信息窗口。有关Google Maps Info Window 的更多信息，请查看example on info windows。

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);
});

【讨论】：