New markers with shadows

app/views/layouts/application.html.erb

@@ -11,37 +11,56 @@
       var map;
       var latlng = new google.maps.LatLng(<%= @lat %>, <%= @lng %>);
       var myOptions = {
+        mapTypeControl: false,
+        scaleControl: true,
+        scaleControlOptions: {
+          position: google.maps.ControlPosition.BOTTOM_CENTER
+        },
         zoom: <%= @zoom %>,
+        zoomControl: false,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       };
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
-      var redMarker = '/images/markers/red.png';
-      var greenMarker = '/images/markers/green.png';
       var openInfoWindow;
       var formString = '<%= render(:partial => "adoption_form").gsub("\n", "") %>'
-<% @hydrants.each do |hydrant| %>
+      function addMarker(point, color, contentString) {
-  <% if user = hydrant.user %>
+        var image = new google.maps.MarkerImage(color,
-      var contentString = '<%= render(:partial => "user_profile", :locals => {:user => user}).gsub("\n", "") %>'
+          new google.maps.Size(25.0, 44.0),
-  <% else %>
+          new google.maps.Point(0, 0),
-      var contentString = formString;
+          new google.maps.Point(12.0, 22.0)
-  <% end %>
+        );
-      var h<%= hydrant.id %>LatLng = new google.maps.LatLng(<%= hydrant.lat %>, <%= hydrant.lng %>);
+        var shadow = new google.maps.MarkerImage('/images/markers/shadow.png',
-      var h<%= hydrant.id %>Marker = new google.maps.Marker({
+          new google.maps.Size(48.0, 44.0),
-          position: h<%= hydrant.id %>LatLng,
+          new google.maps.Point(0, 0),
+          new google.maps.Point(12.0, 22.0)
+        );
+        var marker = new google.maps.Marker({
+          position: point,
           map: map,
-          icon: <%= hydrant.user_id ? "greenMarker" : "redMarker" %>
+          icon: image,
+          shadow: shadow
         });
-      var h<%= hydrant.id %>InfoWindow = new google.maps.InfoWindow({
+        var infoWindow = new google.maps.InfoWindow({
             content: contentString
         });
-      google.maps.event.addListener(h<%= hydrant.id %>Marker, 'click', function() {
+        google.maps.event.addListener(marker, 'click', function() {
           if(openInfoWindow) {
             openInfoWindow.close();
           }
-        h<%= hydrant.id %>InfoWindow.open(map, h<%= hydrant.id %>Marker);
+          infoWindow.open(map, marker);
-        openInfoWindow = h<%= hydrant.id %>InfoWindow;
+          openInfoWindow = infoWindow;
         });
+      }
+<% @hydrants.each do |hydrant| %>
+      point = new google.maps.LatLng(<%= hydrant.lat %>, <%= hydrant.lng %>);
+      color = <%= hydrant.user_id ? "'/images/markers/green.png'" : "'/images/markers/red.png'" %>;
+  <% if user = hydrant.user %>
+      contentString = '<%= render(:partial => "user_profile", :locals => {:user => user}).gsub("\n", "") %>'
+  <% else %>
+      contentString = formString;
+  <% end %>
+      addMarker(point, color, contentString);
 <% end %>
       $('.box input[type="radio"]').live('click', function() {
         var self = $(this);