自定义Google Map Marker，例如Trulia地图

Question

How to make Google Map markers like the one used in Trulia map?

1. The markers have pointer in the bottom
2. The markers have price labels.
3. The markers seems to have variable length depend on the label inside them.
4. The markers can change color when it's being hovered (grey color) or it's already clicked (orange color) beside its normal color (green).

Is there a library for this?

Screenshot is below

UPDATE

So far I found a library MarkerWithLabel and I can reproduce the 2, 3, and 4 above. See below for the code. But I can't seem to put a pointer in the bottom of the label.

See fiddle 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

Previous answer was

But there is another problem. It seems when you display the icon, the pointer of the label doesn't really point to the marker. see this http://jsfiddle.net/petrabarus/y3M4u/ .

The MarkerWithLabel does give labelAnchor property to set (see this ). But when the label is too long, the anchor positioning will be broken too.

Answer 1

maybe this can help you 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
});

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