Add markers as you pan around

app/models/hydrant.rb

@@ -1,7 +1,7 @@
 class Hydrant < ActiveRecord::Base
   belongs_to :user
 
-  def self.find_closest(lat, lng, limit=100)
+  def self.find_closest(lat, lng, limit=50)
     Hydrant.find_by_sql(["SELECT *, (3959 * ACOS(COS(RADIANS(?)) * COS(RADIANS(lat)) * COS(radians(lng) - RADIANS(?)) + SIN(RADIANS(?)) * SIN(RADIANS(lat)))) AS distance FROM hydrants ORDER BY distance LIMIT ?", lat, lng, lat, limit])
   end
 

app/views/javascripts/main.js.erb

@@ -1,14 +1,15 @@
 $(function() {
   var latlng = new google.maps.LatLng(42.358431, -71.059773);
+  var southWest;
+  var northEast;
+  var bounds;
   var myOptions = {
-    mapTypeControl: false,
-    scaleControl: true,
-    scaleControlOptions: {
-      position: google.maps.ControlPosition.BOTTOM_CENTER
-    },
-    zoom: 15,
     center: latlng,
-    mapTypeId: google.maps.MapTypeId.ROADMAP
+    mapTypeControl: false,
+    mapTypeId: google.maps.MapTypeId.ROADMAP,
+    panControl: false,
+    zoom: 15,
+    zoomControl: false
   };
   var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   var activeHydrantId;
@@ -16,9 +17,6 @@ $(function() {
   var activeInfoWindow;
   var hydrantIds = [];
   function addMarker(hydrantId, point, color) {
-    if($.inArray(hydrantId, hydrantIds) != -1) {
-      return;
-    }
     var image = new google.maps.MarkerImage(color,
       new google.maps.Size(27.0, 37.0),
       new google.maps.Point(0, 0),
@@ -55,6 +53,43 @@ $(function() {
     });
     hydrantIds.push(hydrantId);
   }
+  function addMarkersAround(lat, lng) {
+    $.get('<%= hydrants_path :format => "json" %>', {
+      'commit': $('#location_submit').val(),
+      'utf8': '✓',
+      'authenticity_token': $('#location_form input[name="authenticity_token"]').val(),
+      'lat': lat,
+      'lng': lng
+    }, function(data) {
+      if(data.errors) {
+        $('#address_label').addClass('error', 500);
+        $('#address').addClass('error', 500);
+        $('#address').focus();
+      } else {
+        center = new google.maps.LatLng(lat, lng);
+        map.setCenter(center)
+        map.setZoom(18);
+        var i = 0;
+        $(data).each(function(index, hydrant) {
+          hydrant = hydrant.hydrant;
+          if($.inArray(hydrant.id, hydrantIds) != -1) {
+            // continue
+            return true;
+          }
+          setTimeout(function() {
+            point = new google.maps.LatLng(hydrant.lat, hydrant.lng);
+            color = '/images/markers/' + (hydrant.user_id ? 'green' : 'red') + '.png';
+            addMarker(hydrant.id, point, color);
+          }, i * 100);
+          i += 1
+        });
+      }
+    });
+  }
+  google.maps.event.addListener(map, 'dragend', function() {
+    center = map.getCenter();
+    addMarkersAround(center.lat(), center.lng());
+  });
   $('#location_form').submit(function() {
     if($('#address').val() === '') {
       $('#address_label').addClass('error', 500);
@@ -73,30 +108,7 @@ $(function() {
           $('#address').addClass('error', 500);
           $('#address').focus();
         } else {
-          map.setZoom(18);
-          latlng = new google.maps.LatLng(data[0], data[1]);
-          map.setCenter(latlng);
-          $.get('<%= hydrants_path :format => "json" %>', {
-            'commit': $('#location_submit').val(),
-            'utf8': '✓',
-            'authenticity_token': $('#location_form input[name="authenticity_token"]').val(),
-            'lat': data[0],
-            'lng': data[1]
-          }, function(data) {
-            // This should never happen, but just in case
-            if(data.errors) {
-              $('#address_label').addClass('error', 500);
-              $('#address').addClass('error', 500);
-              $('#address').focus();
-            } else {
-              $(data).each(function(index, hydrant) {
-                hydrant = hydrant.hydrant;
-                point = new google.maps.LatLng(hydrant.lat, hydrant.lng);
-                color = '/images/markers/' + (hydrant.user_id ? "green" : "red") + '.png';
-                addMarker(hydrant.id, point, color);
-              });
-            }
-          });
+          addMarkersAround(data[0], data[1]);
         }
       });
     }

public/javascripts/maps.js

@@ -0,0 +1,34 @@
+
+
+<html><head>
+<meta http-equiv="content-type" content="text/html;charset=utf-8">
+<title>502 Server Error</title>
+<style><!--
+body {font-family: arial,sans-serif}
+div.nav {margin-top: 1ex}
+div.nav A {font-size: 10pt; font-family: arial,sans-serif}
+span.nav {font-size: 10pt; font-family: arial,sans-serif; font-weight: bold}
+div.nav A,span.big {font-size: 12pt; color: #0000cc}
+div.nav A {font-size: 10pt; color: black}
+A.l:link {color: #6f6f6f}
+A.u:link {color: green}
+//--></style>
+<script><!--
+var rc=502;
+//-->
+</script>
+</head>
+<body text=#000000 bgcolor=#ffffff>
+<table border=0 cellpadding=2 cellspacing=0 width=100%><tr><td rowspan=3 width=1% nowrap>
+<b><font face=times color=#0039b6 size=10>G</font><font face=times color=#c41200 size=10>o</font><font face=times color=#f3c518 size=10>o</font><font face=times color=#0039b6 size=10>g</font><font face=times color=#30a72f size=10>l</font><font face=times color=#c41200 size=10>e</font>&nbsp;&nbsp;</b>
+<td>&nbsp;</td></tr>
+<tr><td bgcolor="#3366cc"><font face=arial,sans-serif color="#ffffff"><b>Error</b></td></tr>
+<tr><td>&nbsp;</td></tr></table>
+<blockquote>
+<H1>Server Error</H1>
+The server encountered a temporary error and could not complete your request.<p>Please try again in 30 seconds.
+
+<p>
+</blockquote>
+<table width=100% cellpadding=0 cellspacing=0><tr><td bgcolor="#3366cc"><img alt="" width=1 height=4></td></tr></table>
+</body></html>