Javascript 谷歌地图API v3的可扩展地图标记覆盖

我已经使用谷歌地图API v3很长时间了。我想创建一个可扩展的谷歌地图标记，用于我的地图。我一直在使用与下图中类似的地图标记：-

我想做的是，当我在地图上的这个标记上悬停时，它应该展开并显示标记描述，类似于下图-

---

当鼠标悬停在外时，标记应返回到第一个图像，即正常图像。这应该是相当简单的做到这一点，然而，我不知道在哪里和如何开始。非常感谢您的帮助。

您可以在

mouseover

和

mouseout

上使用

marker.setIcon

：

google.maps.event.addListener(marker, 'mouseover', function() {
    marker.setIcon('http://i.stack.imgur.com/t7vAK.png');
});
google.maps.event.addListener(marker, 'mouseout', function() {
    marker.setIcon('http://i.stack.imgur.com/TrIat.png');
});

演示：

这个解决方案的一个小问题是，“Hello World”图标的箭头应该放在图标的中间，而不是像现在这样移动到左边。p> 这样你就失去了“扩展”效应