angular-google-maps labels overlapse icons angular-google-maps labels overlapse icons angularjs angularjs

angular-google-maps labels overlapse icons


I fixed it like this for future readers:

   //1x1 img which is overlapsed by label   var iconimg = {        url: 'img/markers/'+value[8], // url        scaledSize: new google.maps.Size(1, 1), // size    };    //icon as background image     var newstyle = {        'background-image':'url("img/markers/'+value[8]+'")',        'background-size': '36.5px 61px',        'background-position': 'top left',        'background-repeat': 'no-repeat'    }$scope.map.markers.push({    id: value[3],    latitude: angular.fromJson(value[1]),    longitude: angular.fromJson(value[2]),    icon: iconimg,    title : value[0],    options: {        labelContent : dist + '<br />'+$filter('date')(date,'d-M'),        labelAnchor: "36 61",        labelClass: 'labelClass',        labelStyle: newstyle,        labelInBackground: false    } });

Content of the labelclass css

.labelClass {    padding-top:29px;    padding-left:2px;    color:#000;     font-family: 'open_sansregular';    height:61px;     width:37px;    font-size:9px;    line-height: 12px;}