title: Google Maps API v3 - Different markers/labels on different zoom levels
body: <p>I was wondering if it is possible that Google has a feature to view different markers on different zoom levels.</p>
  
  <p>For example, on zoom level 1, I want one marker over China with the label saying "5". And as the user zooms in, lets say on zoom level 4, I want the previous marker and label to disappear. And I want to have 5 new markers/labels, each on a different city in China all saying "1". Thus China will say a number and all the cities in China will say numbers adding up to China's number.</p>
  
  <p>The key concept I am trying to figure out here is how to hide markers and labels based on zoom levels. A constraint for me is that I am living in China currently where google is censored, so a lot of online documents are censored for me, including many of google's documentations.</p>
  
  <p>Here is my code thus far</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;title&gt;TM China&lt;/title&gt; 
      &lt;style type="text/css"&gt;
        html, body, #map_canvas { 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: 60px;     
       border: 2px solid black;
       white-space: nowrap;
     }
      &lt;/style&gt;
      &lt;script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDV0lcdK7C2GHbQAmdkBID70Uppuf-D030&amp;sensor=true"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
      eval(function(p,a,c,k,e,r){e=function(c){return(c&lt;a?'':e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 m(a){2.3=a;2.8=V.1E("1u");2.8.4.C="I: 1m; J: 1g;";2.k=V.1E("1u");2.k.4.C=2.8.4.C}m.l=E 6.5.22();m.l.1Y=7(){n c=2;n h=t;n f=t;n j;n b;n d,K;n i;n g=7(e){p(e.1v){e.1v()}e.2b=u;p(e.1t){e.1t()}};2.1s().24.G(2.8);2.1s().20.G(2.k);2.11=[6.5.9.w(V,"1o",7(a){p(f){a.s=j;i=u;6.5.9.r(c.3,"1n",a)}h=t;6.5.9.r(c.3,"1o",a)}),6.5.9.o(c.3.1P(),"1N",7(a){p(h&amp;&amp;c.3.1M()){a.s=E 6.5.1J(a.s.U()-d,a.s.T()-K);j=a.s;p(f){6.5.9.r(c.3,"1i",a)}F{d=a.s.U()-c.3.Z().U();K=a.s.T()-c.3.Z().T();6.5.9.r(c.3,"1e",a)}}}),6.5.9.w(2.k,"1d",7(e){c.k.4.1c="2i";6.5.9.r(c.3,"1d",e)}),6.5.9.w(2.k,"1D",7(e){c.k.4.1c=c.3.2g();6.5.9.r(c.3,"1D",e)}),6.5.9.w(2.k,"1C",7(e){p(i){i=t}F{g(e);6.5.9.r(c.3,"1C",e)}}),6.5.9.w(2.k,"1A",7(e){g(e);6.5.9.r(c.3,"1A",e)}),6.5.9.w(2.k,"1z",7(e){h=u;f=t;d=0;K=0;g(e);6.5.9.r(c.3,"1z",e)}),6.5.9.o(2.3,"1e",7(a){f=u;b=c.3.1b()}),6.5.9.o(2.3,"1i",7(a){c.3.O(a.s);c.3.D(2a)}),6.5.9.o(2.3,"1n",7(a){f=t;c.3.D(b)}),6.5.9.o(2.3,"29",7(){c.O()}),6.5.9.o(2.3,"28",7(){c.D()}),6.5.9.o(2.3,"27",7(){c.N()}),6.5.9.o(2.3,"26",7(){c.N()}),6.5.9.o(2.3,"25",7(){c.16()}),6.5.9.o(2.3,"23",7(){c.15()}),6.5.9.o(2.3,"21",7(){c.13()}),6.5.9.o(2.3,"1Z",7(){c.L()}),6.5.9.o(2.3,"1X",7(){c.L()})]};m.l.1W=7(){n i;2.8.1r.1q(2.8);2.k.1r.1q(2.k);1p(i=0;i&lt;2.11.1V;i++){6.5.9.1U(2.11[i])}};m.l.1T=7(){2.15();2.16();2.L()};m.l.15=7(){n a=2.3.z("Y");p(H a.1S==="P"){2.8.W=a;2.k.W=2.8.W}F{2.8.G(a);a=a.1R(u);2.k.G(a)}};m.l.16=7(){2.k.1Q=2.3.1O()||""};m.l.L=7(){n i,q;2.8.S=2.3.z("R");2.k.S=2.8.S;2.8.4.C="";2.k.4.C="";q=2.3.z("q");1p(i 1L q){p(q.1K(i)){2.8.4[i]=q[i];2.k.4[i]=q[i]}}2.1l()};m.l.1l=7(){2.8.4.I="1m";2.8.4.J="1g";p(H 2.8.4.B!=="P"){2.8.4.1k="1j(B="+(2.8.4.B*1I)+")"}2.k.4.I=2.8.4.I;2.k.4.J=2.8.4.J;2.k.4.B=0.1H;2.k.4.1k="1j(B=1)";2.13();2.O();2.N()};m.l.13=7(){n a=2.3.z("X");2.8.4.1h=-a.x+"v";2.8.4.1f=-a.y+"v";2.k.4.1h=-a.x+"v";2.k.4.1f=-a.y+"v"};m.l.O=7(){n a=2.1G().1F(2.3.Z());2.8.4.12=a.x+"v";2.8.4.M=a.y+"v";2.k.4.12=2.8.4.12;2.k.4.M=2.8.4.M;2.D()};m.l.D=7(){n a=(2.3.z("14")?-1:+1);p(H 2.3.1b()==="P"){2.8.4.A=2h(2.8.4.M,10)+a;2.k.4.A=2.8.4.A}F{2.8.4.A=2.3.1b()+a;2.k.4.A=2.8.4.A}};m.l.N=7(){p(2.3.z("1a")){2.8.4.Q=2.3.2f()?"2e":"1B"}F{2.8.4.Q="1B"}2.k.4.Q=2.8.4.Q};7 19(a){a=a||{};a.Y=a.Y||"";a.X=a.X||E 6.5.2d(0,0);a.R=a.R||"2c";a.q=a.q||{};a.14=a.14||t;p(H a.1a==="P"){a.1a=u}2.1y=E m(2);6.5.18.1x(2,1w)}19.l=E 6.5.18();19.l.17=7(a){6.5.18.l.17.1x(2,1w);2.1y.17(a)};',62,143,'||this|marker_|style|maps|google|function|labelDiv_|event|||||||||||eventDiv_|prototype|MarkerLabel_|var|addListener|if|labelStyle|trigger|latLng|false|true|px|addDomListener|||get|zIndex|opacity|cssText|setZIndex|new|else|appendChild|typeof|position|overflow|cLngOffset|setStyles|top|setVisible|setPosition|undefined|display|labelClass|className|lng|lat|document|innerHTML|labelAnchor|labelContent|getPosition||listeners_|left|setAnchor|labelInBackground|setContent|setTitle|setMap|Marker|MarkerWithLabel|labelVisible|getZIndex|cursor|mouseover|dragstart|marginTop|hidden|marginLeft|drag|alpha|filter|setMandatoryStyles|absolute|dragend|mouseup|for|removeChild|parentNode|getPanes|stopPropagation|div|preventDefault|arguments|apply|label|mousedown|dblclick|none|click|mouseout|createElement|fromLatLngToDivPixel|getProjection|01|100|LatLng|hasOwnProperty|in|getDraggable|mousemove|getTitle|getMap|title|cloneNode|nodeType|draw|removeListener|length|onRemove|labelstyle_changed|onAdd|labelclass_changed|overlayMouseTarget|labelanchor_changed|OverlayView|labelcontent_changed|overlayImage|title_changed|labelvisible_changed|visible_changed|zindex_changed|position_changed|1000000|cancelBubble|markerLabels|Point|block|getVisible|getCursor|parseInt|pointer'.split('|'),0,{}))
      var map;
      var mapOptions = { center: new google.maps.LatLng(35, 105), zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
  
  
  
      var locations = [
                       ['Hong Kong', 22.39, 114.10, 1885],
                       ['Shanghai', 31.232, 121.47, 5885],
                       ['Beijing', 39.88, 116.40, 6426],
                       ['Guangzhou', 23.129, 113.264, 4067],
                       ['Shenzhen', 22.54, 114.05, 3089],
                       ['Hangzhou', 30.27, 120.15, 954]
                     ];
  
      var infowindow = new google.maps.InfoWindow();
  
      var i;
      /*
      for (i = 0; i &lt; locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });
  
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));
        } */
  
      function myMarker(options) {
          if(!options.labelAnchor) {
            options.labelAnchor = new google.maps.Point(30, 50);
          }
          if(!options.labelClass) {
            options.labelClass = "labels";
          }
          options.map = map;
  
          return new MarkerWithLabel(options);
        }
  
      function initialize() {
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          for (i = 0; i &lt; locations.length; i++) { 
          var marker = new MarkerWithLabel({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            draggable: false,
            map: map,
            labelContent: locations[i][3],
            labelAnchor: new google.maps.Point(30, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 0.75}
  
          });
          }
          /*
          var marker2 = new myMarker({
              position: new google.maps.LatLng(20,20),
              draggable: true,
              labelContent: "second"
            });
   */
          }
      google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas" style="width:85%; height:85%"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>EDIT </p>
  
  <p>I have been trying to experiment with the MarkerManager, but I can't get the markers to create successfully on different zoom levels.</p>
  
  <p>First, I changed my default zoom level to 1, and then I changed my code to what is shown below.</p>
  
  <pre><code>function initialize() {
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
     /* for (i = 0; i &lt; locations.length; i++) { 
      var marker = new MarkerWithLabel({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        draggable: false,
        map: map,
        labelContent: locations[i][3],
        labelAnchor: new google.maps.Point(30, 0),
        labelClass: "labels", // the CSS class for the label
        labelStyle: {opacity: 0.75}
  
      });
      } */
      var listener = google.maps.event.addListener(map, 'bounds_changed', function(){
          setupMarkers();
          google.maps.event.removeListener(listener);
      });
      }
  
  function createCityMarkers() {
  
  
      for (i = 0; i &lt; locations.length; i++) { 
          var marker = new MarkerWithLabel({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            draggable: false,
            map: map,
            labelContent: locations[i][3],
            labelAnchor: new google.maps.Point(30, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 0.75}
  
          });
          }
  }
  
  function setupMarkers() {
      mgr = new MarkerManager(map);
  
      google.maps.event.addListener(mgr, 'loaded', function(){
            mgr.addMarkers(createCityMarkers(), 4);
  
            mgr.refresh();
        });
  }
  </code></pre>
  
  <p>I have also tried applying the source code of this link as well, but nothing is working out. And when I copy the source code directly to my computer and replace all the icons with markers, the markers still don't appear. I can't seem to figure how to make markers appear using the marker Manager.
  <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/weather_map.html">http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/weather_map.html</a></p>