自定义谷歌地图标记，如 Trulia 地图

Question

如何制作像 Trulia 地图中使用的谷歌地图标记？

1. 标记的底部有指针
2. 标记带有价格标签。
3. 标记似乎具有可变长度，具体取决于其中的标签。
4. 标记可以在悬停时改变颜色（灰色）或在正常颜色（绿色）旁边被点击（橙色）。

有这个库吗？

截图如下

更新

到目前为止，我找到了一个库 MarkerWithLabel，我可以重现上面的 2、3 和 4。请参阅下面的代码。 但我似乎无法在标签底部放置指针。

见小提琴http://jsfiddle.net/petrabarus/p8YhU/

var marker = new MarkerWithLabel({
    position: homeLatLng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "$425K",
    labelAnchor: new google.maps.Point(0, 0),
    labelClass: "labels", // the CSS class for the label
    icon: {},
    isClicked: false
});

google.maps.event.addListener(marker, 'click', function() {
    marker.isClicked = true;
    marker.set('labelClass', 'labels active');
});
google.maps.event.addListener(marker, 'mouseover', function() {
    marker.set('labelClass', 'labels hover');
});
google.maps.event.addListener(marker, 'mouseout', function() {
    if (marker.isClicked){
        marker.set('labelClass', 'labels active');
    } else {
        marker.set('labelClass', 'labels');
    }
});

更新

之前的回答是

但是还有另一个问题。似乎当您显示图标时，标签的指针并没有真正指向标记。看到这个http://jsfiddle.net/petrabarus/y3M4u/。

MarkerWithLabel 确实提供了要设置的 labelAnchor 属性（请参阅 this）。但是当标签太长时，锚定位也会被打破。

Answer 1

也许这可以帮助你example

var marker = new MarkerWithLabel({
    position: homeLatLng,
    draggable: true,
    raiseOnDrag: true,
    map: map,
    labelContent: "<div class='arrow'></div><div class='inner'>$425K</div>",
    labelAnchor: new google.maps.Point(0, 0),
    labelClass: "labels", // the CSS class for the label
    icon: {},
    isClicked: false
});

和css

.labels {
    margin-top:-3px;
    padding: 5px;
    position: absolute;
    visibility: visible;
    z-index: 1030;
}
.labels .arrow{
    border-top-color: #000000;
    border-right-color: rgba(0,0,0,0);
    border-bottom-color: rgba(0,0,0,0);
    border-left-color: rgba(0,0,0,0);
    border-width: 5px 5px 0;
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-style: solid;
    height: 0;
    position: absolute;
    width: 0;
}
.labels .inner{
    background-color: #000000;
    border-radius: 4px;
    color: #FFFFFF;
    max-width: 200px;
    padding: 3px 8px;
    text-align: center;
    text-decoration: none;  
}