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

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