Use Leaflet marker clusters.

Doesn't work - clusters don't spiderfy at max zoom, show their
boundaries on hover or split when you get close to them.

Gemfile

@@ -7,6 +7,7 @@ gem 'rack', '~>1.4.5'
 gem 'json', '~>1.7.7'
 gem 'haml'
 gem 'leaflet-rails'
+gem 'leaflet-markercluster-rails'
 gem 'unicorn' # http server
 
 gem 'cancan' # for checking member privileges

Gemfile.lock

@@ -135,6 +135,8 @@ GEM
       thor (>= 0.14, < 2.0)
     json (1.7.7)
     kgio (2.8.0)
+    leaflet-markercluster-rails (0.6.0)
+      railties (>= 3.1)
     leaflet-rails (0.6.2)
     less (2.3.2)
       commonjs (~> 0.2.6)
@@ -271,6 +273,7 @@ DEPENDENCIES
   haml-rails
   jquery-rails
   json (~> 1.7.7)
+  leaflet-markercluster-rails
   leaflet-rails
   less-rails
   memcachier

app/assets/stylesheets/application.css

@@ -6,5 +6,7 @@
  *= require bootstrap-datepicker
  *= require leaflet.ie
  *= require leaflet
+ *= require leaflet.markercluster
+ *= require leaflet.markercluster.default
  *= require_tree .
 */

app/views/places/index.html.haml

@@ -3,6 +3,7 @@
 %div#map
 
 <script src="/assets/leaflet.js?body=1" type="text/javascript"></script>
+<script src="/assets/leaflet.markercluster.js?body=1" type="text/javascript"></script>
 
 - attribution = render(:partial => 'map_attribution').gsub(/\n/, " ")
 :javascript
@@ -11,10 +12,13 @@
     attribution: '#{ attribution }',
     maxZoom: 18
   }).addTo(map);
+  var markers = new L.MarkerClusterGroup({spiderfyOnMaxZoom: true, showCoverageOnHover: true, zoomToBoundsOnClick: true});
 
 - Member.located.each do |m|
   :javascript
     marker = new L.Marker(new L.LatLng(#{m.latitude}, #{m.longitude}));
     marker.bindPopup('#{ link_to m, m } #{ escape_javascript( render :partial => 'members/popover', :locals => { :member => m }) }').openPopup();
-    map.addLayer(marker);
+    markers.addLayer(marker)
 
+:javascript
+  map.addLayer(markers);