title: Google Maps Store Locator Library with MarkerClusterer
body: <p>I'm using the <a href="https://github.com/googlemaps/js-store-locator" rel="nofollow">Google Maps Store Locator library</a>, but I want to be able to implement <a href="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/" rel="nofollow">MarkerClusterer</a> alongside it. However, I haven't been able to figure out how to make them work together.</p>
  
  <p>Code:</p>
  
  <pre><code>(function($, window, document){
  
      var map = null,
          cluster = null;
  
      function storeSource() {
          $.extend(this, new storeLocator.StaticDataFeed);
          var that = this;
  
          $.getJSON('linktoAJAXThatReturnsJSON', function(data) {
              that.setStores(that.parse_(data));
              map.fitBounds(centerMap(data));
          });
      }
  
      storeSource.prototype.parse_ = function(data) {
          var stores = [];
  
          data.forEach(function(row){
              var
              position = new google.maps.LatLng(row.lat, row.long),
              locality = row.postcode + ', ' + row.city,
  
              store = new storeLocator.Store(row.id, position, null, {
                      title   : row.name,
                      address : [row.address, locality, row.country].join('&lt;br&gt;'),
                      phone   : row.phone
                  });
  
              stores.push(store);
          });
  
          return stores;
      };
  
      // Clusters Markers together
      function makeCluster(data) {
          var markers = [];
  
          data.forEach(function(row){
              markers.push(row.getMarker());
          });
  
          cluster = new MarkerClusterer(map, markers, {});
      }
  
      // Finds viewpoint that accomodates all locations
      function centerMap(data) {
          var bounds = new google.maps.LatLngBounds();
  
          data.forEach(function(row){
              bounds.extend(new google.maps.LatLng(row.lat, row.long));
          });
  
          return bounds;
      }
  
      google.maps.event.addDomListener(window, 'load', function() {
          map = new google.maps.Map(document.getElementById('mappanel'), {
              mapTypeId : google.maps.MapTypeId.ROADMAP
          });
          var data = new storeSource();
          var view = new storeLocator.View(map, data, {
              geolocation: false
          });
  
          new storeLocator.Panel(document.getElementById('searchpanel'), {
              view: view
          });
  
          // I think this is the place to try and add the Markers
          // from storeSource. However, debugging shows Markers haven't
          // been created yet. This leads me to believe that it's done
          // internally in the storeLocator library. Not sure what to do
          makeCluster(view.data_.stores_);
      });
  
      $(document).on('click', '.action', function(e){
          e.preventDefault();
      });
  })(window.jQuery, window, document);
  </code></pre>
  
  <p>Unfortuantely, I don't have a live version.</p>
  
  <p>As explained in the code, the MarkerClusterer requires an array of objects of type google.maps.Marker. </p>
  
  <p>My plan is to reuse the storeLocator.Store objects and retrieve the Marker from it. I try to retrieve them, but debugging shows that they are undefined. </p>
  
  <p>Not sure how to make these 2 libraries work together without having to hack either of them.</p>
  
  <p><strong>EDIT::SOME PROGRESS MADE</strong></p>
  
  <p>I was able to store the Markers the StoreLocator uses into MarkerClusterer by overriding storeLocator.View.createMarker function. However, this leads to another problem: the visibility of the markers are controlled by 2 different libraries: MarkerClusterer wants to hide the Markers when zoomed out, but storeLocator displays all Markers all the time.</p>
  
  <p>Is there a way to make the Markers follow MarkerClusterer's default behavior?</p>
  
  <p>I also have a <a href="http://jsfiddle.net/Z6WHR/16/" rel="nofollow">JFiddle</a>.</p>
  
  <p><strong>EDIT #2::SOLUTION</strong></p>
  
  <p>Huge thanks to P1s4 for the solution! Here is the revised <a href="http://jsfiddle.net/Z6WHR/17/" rel="nofollow">JFiddle</a>.</p>