Google maps marker manager breaks label bindings

Question

I'm having an issue with with combining marker manager and maplabel using google maps API.

When I bind a label to a marker's map and position everything works as expected. When I move the marker the label moves, and when I remove the marker from the map, the label is also removed. The issue happens when I add the marker to marker manger. It appears that all bindings are broken so my label no longer moves with the marker and the label stays on the map after the marker is removed.

Here's a JS fiddle showing the issue: http://jsfiddle.net/d6Su5/

You will see the first marker (not in the manager) can be moved with its label but the second marker leaves the label behind.

Code:

var map;
var mgr;
var elevator;
var myOptions = {
    zoom: 6,
    center: new google.maps.LatLng(46.87916, -3.32910),
    mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
mgr = new MarkerManager(map);   

var marker = new google.maps.Marker({
    title: 'No manager',
    position: new google.maps.LatLng(46.87916, -3.32910),
    map: map,
    draggable: true
});

var mapLabel = new MapLabel({
    text: 'No manager'
});

mapLabel.bindTo('position', marker);
mapLabel.bindTo('map', marker);

var marker2 = new google.maps.Marker({
    title: 'With manager',
    position: new google.maps.LatLng(44.87916, -3.32910),
    map: map,
    draggable: true
});

var mapLabel2 = new MapLabel({
    text: 'With manager'
});

mapLabel2.bindTo('map', marker2);
mapLabel2.bindTo('position', marker2);

google.maps.event.addListenerOnce(map, 'idle', function() {
    mgr.addMarker(marker2, 1);
}); 

What am I missing?

Answer 1

I found the solution. The position should be set on the label instead of the marker, and then the marker should be bound to the label, not the other way around. Also, the map is set by the marker manager when the marker is loaded. Here's an updated jsfiddle: http://jsfiddle.net/d6Su5/2

var marker2 = new google.maps.Marker({
    title: 'With manager',
    draggable: true
});

var mapLabel2 = new MapLabel({
    position: new google.maps.LatLng(44.87916, -3.32910),
    text: 'With manager'
});

marker2.bindTo('map', mapLabel2);
marker2.bindTo('position', mapLabel2);

google.maps.event.addListenerOnce(map, 'idle', function() {
    mgr.addMarker(marker2, 2);
}); 

Hopefully this helps someone in the future!