title: Markerclusterer customization google maps
body: <p>I have a basic markerclusterer example which works very well.</p>
  
  <pre><code>var center = new google.maps.LatLng(37.4419, -122.1419);
  var options = {
    'zoom': 13,
    'center': center,
    'mapTypeId': google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map"), options);
  
  var markers = [];
  for (var i = 0; i &lt; 100; i++) {
    var latLng = new google.maps.LatLng(data.photos[i].latitude,
        data.photos[i].longitude);
    var marker = new google.maps.Marker({'position': latLng});
    markers.push(marker);
  }
  var markerCluster = new MarkerClusterer(map, markers);
  </code></pre>
  
  <p>What I would like to do is cluster the markers by country and then once you click on it they are still clustered until on3 further click. Currently they are clustered until you are down to one result. I have thousands of markers and would like them visible after one country click and then one more click.</p>
  
  <p>I looked for a solution online and found this <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/google_northamerica_offices.html" rel="nofollow">http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/examples/google_northamerica_offices.html</a></p>
  
  <p>which is produced using this</p>
  
  <pre><code>    var officeLayer = [
    {
      "zoom": [0, 3],
      "places": [
        { "name": "US Offices", "icon": ["us", "flag-shadow"], "posn": [40, -97] },
        { "name": "Canadian Offices", "icon": ["ca", "flag-shadow"], "posn": [58, -101] }
      ]
    },
    ...
  };
  
  function setupOfficeMarkers() {
    allmarkers.length = 0;
    for (var i in officeLayer) {
      if (officeLayer.hasOwnProperty(i)) {
        var layer = officeLayer[i];
  
        var markers = [];
        for (var j in layer["places"]) {
          if (layer["places"].hasOwnProperty(j)) {
            var place = layer["places"][j];
            var icon = getIcon(place["icon"]);
  
            var title = place["name"];
            var posn = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
            var marker = createMarker(posn, title, getIcon(place["icon"]));
            markers.push(marker);
            allmarkers.push(marker);
          }
        }
        mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
      }
  
    }
    mgr.refresh();
    updateStatus(mgr.getMarkerCount(map.getZoom()));
  }
  </code></pre>
  
  <p>I'm not sure how to implement this into what I've currently got and if i need to include any other scripts/ libraries also.</p>