I am using Google Maps API v3 marker with label in one of my project. Here is the link of basic example what I am talking about.
I got stuck making the label center of the marker image. After spending some time I got the simple solution..
I got stuck making the label center of the marker image. After spending some time I got the simple solution..
.labels{
color: #fff;
font-weight: bold;
font-size: 14px;
opacity: 1;
pointer-events: none;
text-align: center;
width: 60px;
white-space: nowrap;
}
function initialize() {
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(0,0),
draggable: true,
map: map,
labelContent: "example",
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
You can make the label float above the marker pushpin with an anchor point like new google.maps.Point(20, 50)
Thanks! You save my life.
ReplyDeleteWelcome!!!
DeleteNice to hear that.
ReplyDelete