How to make Google Map markers like the one used in Trulia map?
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.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.