自定義Google Map Marker，例如Trulia地圖

Question

如何使Google Map標記像Trulia地圖中使用的那樣？

1. 標記的底部有指針
2. 標記帶有價格標簽。
3. 標記的長度似乎可變，具體取決於標記內部的標簽。
4. 當鼠標懸停（灰色）或在其正常顏色（綠色）旁邊已經單擊（橙色）時，標記可以更改顏色。

有圖書館嗎？

屏幕截圖如下

UPDATE

到目前為止，我找到了一個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');
    }
});

UPDATE

先前的答案是

但是還有另一個問題。 似乎當您顯示圖標時，標簽的指針並沒有真正指向標記。 看到這個http://jsfiddle.net/petrabarus/y3M4u/ 。

該MarkerWithLabel確實給labelAnchor屬性設置（見本 ）。 但是，如果標簽太長，錨定位置也會被破壞。

Answer 1

也許這可以幫助你舉例

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