google maps - markerWithLabel in googleMaps causes Infowindow to be displayed faraway from markerClick -

i using markerwithlabel.js custommarkers , when ever clicked on marker, infowindow displayed little far away distance marker location.

here code markercode:

 var t = this;   var m = new markerwithlabel({         position: latlng,         draggable: true,         raiseondrag: true,         icon: ' ',         map: t.map.map,         labelcontent: '<i class="fa fa-circle fa-2x"  style="color:#8dc73f;height:22px;width:22px;"></i><i class="fa fa-arrow-up fa-stack-1x fa-inverse" style="transform: rotatez(9deg);margin-top: 5px;"></i><i style="position:relative;margin-left:-19px;" class="fa fa-circle-o fa-2x"></i>',         labelanchor: new google.maps.point(30, 0),         labelclass: "labels", // css class label         labelstyle: { opacity: 0.75 }     }) 

and infowindow

   t.popup = new google.maps.infowindow({content: popup, closebutton: false, maxwidth: 365, maxheight: 300, position: latlng});      google.maps.event.addlistener(m, 'click', function() {         var content = _.template(checkintemplate, t.markertemplatedata(t.get('checkin')));         t.popup.set('content', content);         t.popup.open(t.map.map, m);     }); 

is there issue this, if simple custom markers same issues ma facing markerwithlabel js

you don't have icon labelled marker.

icon: ' ', 

so api won't able compute correct pixeloffset when using:

infowindow.open(map, this); 

set position of infowindow instead , use single parameter version of infowindow.open

google.maps.event.addlistener(markers[i], 'click', function(e) {   infowindow.setcontent('marker postion: ' + this.getposition());   infowindow.setposition(this.getposition());   infowindow.open(map); }); 

updated fiddle

code snippet:

var globalmarker = [];  var map;    function initialize() {    var center = new google.maps.latlng(45.4214, -75.6919);      map = new google.maps.map(document.getelementbyid('map'), {      zoom: 10,      center: center,      disabledoubleclickzoom: true,      maptypeid: google.maps.maptypeid.roadmap    });      var markers = [];        var infowindow = new google.maps.infowindow();    (i = 0; < 50; i++) {      var latlng = new google.maps.latlng(center.lat() + math.random() - 0.5, center.lng() + math.random() - 0.5);      //var latlng = new google.maps.latlng(45.4214, -75.6919)      marker = new markerwithlabel({        position: latlng,        draggable: true,        raiseondrag: true,        map: map,        icon: ' ',        labelcontent: '<i class="fa fa-circle fa-2x" style="color:#8dc73f;height:22px;width:22px;"></i><i class="fa fa-arrow-up fa-stack-1x fa-inverse" style="transform: rotatez(9deg);margin-top: 5px;"></i><i style="position:relative;margin-left:-19px;" class="fa fa-circle-o fa-2x"></i>',        labelanchor: new google.maps.point(45, 0),        labelclass: "labels", // css class label        labelstyle: {          opacity: 0.75        }      });      markers.push(marker);        makediv(i, 15, "marker #");      google.maps.event.addlistener(markers[i], 'click', function(e) {        infowindow.setcontent('marker postion: ' + this.getposition());        infowindow.setposition(this.getposition());        infowindow.open(map);      });    }    var clusteroptions = {      zoomonclick: false    }    var markercluster = new markerclusterer(map, markers, clusteroptions);    globalmarker = markers.slice();    google.maps.event.addlistener(markercluster, 'clusterclick', function(cluster) {      var content = '';        // convert lat/long cluster object usable mvcobject      var info = new google.maps.mvcobject;      info.set('position', cluster.center_);        //----      //get markers      var markers = cluster.getmarkers();        var titles = "";      //get titles      (var = 0; < markers.length; i++) {        titles += markers[i].labelcontent + "\n";      }      //----          infowindow.close();      infowindow.setcontent(titles); //set infowindow content titles      infowindow.open(map, info);        google.maps.event.addlistener(map, 'zoom_changed', function() {        infowindow.close()      });      });  }    function makediv(index, zoomlevel, content) {    document.getelementbyid("sidebar").innerhtml += '<div onclick="zoomin(' + index + ',' + zoomlevel + ')">' + content + ' ' + index + '</div>';  }    function zoomin(index, zoomlevel) {    map.setcenter(globalmarker[index].getposition());    map.setzoom(zoomlevel);  }    google.maps.event.adddomlistener(window, 'load', initialize);

 html,   body,   #map {     margin: 0;     padding: 0;     height: 100%   }   .labels {     color: red;     background-color: white;     font-family: "lucida grande", "arial", sans-serif;     font-size: 10px;     font-weight: bold;     text-align: center;     width: 90px;     border: 2px solid black;     white-space: nowrap;   }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>  <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>  <div id="map"></div>  <div id="sidebar"></div>