title: How MarkerCluster work with MarkerWithlabel
body: <p>I have markerwith label works fine,but now I want to use markerCluster for tidy purpose.
  I find a <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html" rel="nofollow">tut for markerCluster</a> ,but the code doesn't work for me.</p>
  
  <p>I just try implement easiest example,which seems only need add 1 line:</p>
  
  <pre><code>var mc = new MarkerClusterer(map, markers, mcOptions);
  </code></pre>
  
  <p>And I have added the js script also.</p>
  
  <p>But doesn't work,the markers are displayed but not clustered.</p>
  
  <p>I think its maybe I create markerwithlabel contains label content (which is different form normal marker format)
  following is my js code in html,this html view is in ruby on rails view</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;%= include_gon %&gt;
   &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
   &lt;style type="text/css"&gt;
     .labelsn {
       color: green;
       background-color: transparent;
       font-family: "Lucida Grande", "Arial", sans-serif;
       font-size: 12px;
       font-weight: bold;
       text-align: left;
       width: 40px;
       white-space: nowrap;
     }
  
     .labelsv {
       color: blue;
       background-color: transparent;
       font-family: "Lucida Grande", "Arial", sans-serif;
       font-size: 12px;
       font-weight: bold;
       text-align: center;
       width: 30px;
       white-space: nowrap;
     }
   &lt;/style&gt;
   &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"&gt;&lt;/script&gt;
   &lt;script type="text/javascript" src="/assets/markerwithlabel.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/assets/markerclusterer.js"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
     var iw=[];
     var alladdress=[];
     var allmarkers=[];
     function initMap() {
  
       var clatlng = new google.maps.LatLng(1.352083, 103.819836);
       var myOptions = {
           zoom: 12,
           center: clatlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
       }
        map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
       for(i=0;i&lt;gon.astatic.length;i++){
  
  
         alladdress.push(new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]));
         if(i&lt;gon.vnum){
         allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerV.png" ,title: gon.astatic[i][0],labelClass: "labelsv",labelContent: gon.astatic[i][3]});}
         else
         {
        allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerN.png" ,title: gon.astatic[i][0],labelClass: "labelsn",labelContent: gon.astatic[i][3]});
         }
  
  
         var mc=new MarkerClusterer(map,allmarkers); \\what I have added for cluster 
  google.maps.event.addListener(map,'idle',function(){
  
  mc.getTotalClusters();
  
  })          
       }
  
     google.maps.event.addDomListenerOnce(window,'load',initialize);
     }
  
  
      var ajax_call = function() {
  
       $.ajax({
          type:"GET",
          url:"gmaps/test",
          dataType:"json",
          success: function(result){
          for(i=0;i&lt;result.length;i++)
         {
         allmarkers[i].labelContent=result[i];
         allmarkers[i].label.setContent();
         }
  
          }})
     };
     var interval = 1000*60*5
     setInterval(ajax_call,interval);
   &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onload="initMap()"&gt;
  &lt;div id="map_canvas" style="width: 945px; height: 700px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Has anyone deal with this before?thanks in advance.</p>