Sjoerd de Wit Sjoerd de Wit - 3 months ago 13
Javascript Question

angular-google-maps labels overlapse icons

so i've created an angular aplication with the angular-google-maps library which include the markerswithlabels directory and the labels overlapse the icons so u can see the other label on top of another icon with label. now i wan't this label and icon to hide behind it so it only shows one text,

i've created a code pen to show what i mean:
this is where i set the label:

options: {
labelContent : dist + '<br />Overlapse',
labelAnchor: "16 33",
labelClass: 'labelClass',
labelStyle: {opacity: 0.75},
labelInBackground: true
},


And this tells the markers directory to user markerswithlabels:

<google-map ng-if="showloadedmap" center="map.center" draggable="true" maxZoom="map.maxZoom"
minZoom="map.minZoom" zoom="map.zoom" options="map.options" events="map.events">
<markers models="map.markers"
doCluster="true"
coords="'self'"
icon="'icon'"
click="'onclicked'"
options="'options'"
idkey='id'
clusterOptions='map.clusterOptions'
isLabel='true'>
</markers>

</google-map>


Here is the codepen example

Answer

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