Removing labels from map markers when using markercluster

Question

We're using a custom label code to add markers with labels in Google maps, and also using the MarkerCluster library to cluster the markers.

Our problem is that the markers are hiding, but the labels are still showing. We need to modify http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js

To also hide the 'labels' as well as the markers. I've been trying to find where to add or remove the labels in the markercluster.js with no luck.

Here is our label code:

    // Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
     // Initialization
     this.setValues(opt_options);

     // Here go the label styles
     var span = this.span_ = document.createElement('span');
     span.style.cssText = 'position: relative; left: -50%; top: -35px; ' +
                          'white-space: nowrap;color:#000000;' +
                          'padding: 2px;font-family: Arial; font-weight: bold;' +
                          'font-size: 12px;';

     var div = this.div_ = document.createElement('div');
     div.appendChild(span);
     div.style.cssText = 'position: absolute; display: none';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function() {
     var pane = this.getPanes().overlayImage;
     pane.appendChild(this.div_);

     // Ensures the label is redrawn if the text or position is changed.
     var me = this;
     this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function() { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function() { me.draw(); })
     ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
     this.div_.parentNode.removeChild(this.div_);

     // Label is removed from the map, stop updating its position/text.
     for (var i = 0, I = this.listeners_.length; i < I; ++i) {
          google.maps.event.removeListener(this.listeners_[i]);
     }
};

// Implement draw
Label.prototype.draw = function() {
     var projection = this.getProjection();
     var position = projection.fromLatLngToDivPixel(this.get('position'));
     var div = this.div_;
     div.style.left = position.x + 'px';
     div.style.top = position.y + 'px';
     div.style.display = 'block';
     div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
     this.span_.innerHTML = this.get('text').toString();
};


function initialize() {

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

     setMarkers(map, beaches);  


}

google.maps.event.addDomListener(window, 'load', initialize);

var markersArray = [];
var labelsArray = [];

var beaches = [
     ['Bondi Beach', -33.890542, 151.274856, 4],
     ['Cronulla Beach', -34.028249, 151.157507, 3],
     ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
     ['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
     var image = new google.maps.MarkerImage('marker.png',
     new google.maps.Size(100, 39),
     new google.maps.Point(0,0),
     new google.maps.Point(50, 39));
    /* var shadow = new google.maps.MarkerImage('marker-panel.png',
          new google.maps.Size(37, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));*/
     var shape = {
          coord: [1, 1, 1, 20, 18, 20, 18 , 1],
          type: 'poly'
     };
     for (var i = 0; i < locations.length; i++) {
          var beach = locations[i];
          var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
          var marker = new google.maps.Marker({
               position: myLatLng,
               map: map,
               //shadow: shadow,
               icon: image,
               shape: shape,
               title: beach[0],
              zIndex: beach[3]
          });
          var label = new Label({
               map: map
          });
          label.set('zIndex', 1234);
          label.bindTo('position', marker, 'position');
          label.set('text', beach[0]);
          //label.bindTo('text', marker, 'position');
          markersArray.push(marker);
          labelsArray.push(label);

     }

     var markerCluster = new MarkerClusterer(map, markersArray);

}

Can anyone tell me what I should be changing in the markercluster.js to make it remove labels as well?

Answer 1

add this to the end of the for-loop:

  (function(m,l){
    google.maps.event.addListener(m,'map_changed',function(){l.setMap(this.getMap());});
  })(marker,label)

When a marker has been added to or removed from a cluster the map-property will change. The script will set the map of the label to the map of the marker(it's basically the same as label.bindTo('map',marker,'map') , but it seems as if bindTo doesn't work here).