Tuesday, April 23, 2013

Make label text in center for Google Maps API v3 marker with label

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..


.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)

3 comments: