谷歌地图：Trulia 如何创建他们的自定义 InfoWINdows？答案

【问题标题】：Google Maps: How does Trulia create their custom InfoWIndows?谷歌地图：Trulia 如何创建他们的自定义 InfoWINdows？
【发布时间】：2011-02-05 08:12:23
【问题描述】：

我真的很喜欢 Trulia.com 如何创建他们的自定义 Google 地图 InfoWindows。

我特别喜欢 Trulia 的 InfoWindow 实现的一点是：

超出地图边界：Google Maps InfoWindows 包含在地图边界内，而 Trulia 的似乎能够漂浮在地图顶部
始终在地图中心附近显示 InfoWindow：Google Maps InfoWindows 始终在标记上方显示 InfoWindow，而 Trulia InfoWindows 始终在尽可能靠近地图中心的位置显示 InfoWindow。例如，如果地图标记图标位于靠近边界的地图顶部，Trulia 信息窗口将显示在地图标记图标下方
InfoWindow 在鼠标悬停时显示（不是“单击”）：使用默认的 Google Maps InfoWindow，您必须“单击”地图标记图标才能显示 InfoWindow，而 Trulia InfoWindows 只需将鼠标悬停在上面即可显示地图标记图标。

我找到了PdMarker，它是 Google Map InfoWindows 的第 3 方扩展，可以完成上述大部分但不是全部。 1) 它不会超出地图边界，2) 它不适用于 Google Maps API 版本 3（仅版本 2）。

有人知道 Trulia 如何在 Google Maps API v3 上完成类似于 InfoWindow 的实现吗？

【问题讨论】：

标签： javascript jquery google-maps

【解决方案1】：

这是一个有趣的问题。我最近也在玩地图。我远非专家，但我可以告诉你我所知道的。

我认为您提到的网站使用自定义 div 覆盖而不是谷歌的信息窗口。

1. InfoWindow 在鼠标悬停时显示（不是“点击”）

这可以通过事件监听器来完成。例如在地图 API v3 中：

google.maps.event.addListener(marker, 'mouseover', function() {
   // myDiv.style.visibility = 'visible'
});
google.maps.event.addListener(marker, 'mouseout', function() {
  // myDiv.style.visibility = 'hidden'
});

这是一个pretty good example，说明如何做到这一点。

2。超出地图边界
3.始终在地图中心附近显示InfoWindow

这两个都可以使用 CSS 实现：(2) 使用 z-index 和 (3) 使用 position。

有一个类似的使用自定义标记工具提示的示例，you can find here。它还展示了如何通过将鼠标悬停在页面上的其他元素上来利用鼠标悬停来弹出工具提示。

myElement.onmouseover = function(){
  google.maps.event.trigger(marker, 'mouseover');
}
myElement.onmouseout = function(){
  google.maps.event.trigger(marker, 'mouseout');
}

最后，another site 很好地利用了地图，尽管这个使用了 API 的 V2。希望这会有所帮助。

【讨论】：

【解决方案2】：

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

是谷歌地图的扩展，允许您创建自定义信息窗口

【讨论】：