Points can be deleted from a line by right-clicking on them.

app/views/paths/_form.html.erb

@@ -17,43 +17,121 @@
       add_point_to_polyline(coord, polyline);
       add_edit_marker_to_map(coord, index);
     });
-
+
+    //Click to create a new marker.
     google.maps.event.addListener(map, 'click', function(event){
-      var i = polyline.getPath().getLength();
+      var next_pos = next_position();
+      var index = next_index();
       var coord = {
         latitude: event.latLng.lat(),
         longitude: event.latLng.lng(),
-        position: i+1
+        position: next_position
       };
-      add_coord_to_form(coord, i, '#coord_data');
+      add_coord_to_form(coord, index, '#coord_data');
       add_point_to_polyline(coord, polyline);
-      add_edit_marker_to_map(coord, i)
+      add_edit_marker_to_map(coord, index);
     });
 <% end %>
 <% content_for :js do %>
   var map; //The map!
   var polyline; //The line
+  var marker_data = new Array();
 
   // Update the hidden fields with the
   // latitude and longitude.
-  function update_fields(index, latlng){
-    polyline.getPath().setAt(index, latlng);
-    $('#path_coords_attributes_' + index + '_latitude').val(latlng.lat());
-    $('#path_coords_attributes_' + index + '_longitude').val(latlng.lng());
+  function update_fields(marker, latLng){
+    var index = marker_data[marker.get('data_id')].html_id;
+    $('#path_coords_attributes_' + index + '_latitude').val(latLng.lat());
+    $('#path_coords_attributes_' + index + '_longitude').val(latLng.lng());
     return true;
   }
 
+  // Update the polyline with a new position
+  // from a marker.
+  function update_line(marker, latLng){
+    var index = marker_data[marker.get('data_id')].polyline_id;
+    polyline.getPath().setAt(index, latLng);
+  }
+
   // Add a draggable marker to the map 
   // update a point on a polyline.
   function add_edit_marker_to_map(coord, index){
     var marker = add_point_to_map(coord, map, {draggable: true});
-
+    marker.set('data_id', next_index());
+
+    var data = {
+      html_id: index, 
+      polyline_id: polyline.getPath().length-1,
+      active: true,
+      marker: marker
+    };
+    marker_data.push(data);
+
+    //Drag to move a marker.
     google.maps.event.addListener(marker, "drag", function(event){
-      console.log(index);
-      update_fields(index, event.latLng);
+      update_fields(this, event.latLng);
+      update_line(this, event.latLng);
+    });
+
+    //Right click to delete a marker.
+    google.maps.event.addListener(marker, "rightclick", function(event){
+      //Remove it from the line and map.
+      delete_from_map(this);
+
+      //For every active point past the one being deleted
+      //decrease its polyline data by one.
+      var i = 0;
+      var max = marker_data.length;
+      for(i = this.get('data_id'); i < max; i++){
+        if(marker_data[i].active){
+          $('#path_coords_attributes_' + i + '_position').val(i);
+          marker_data[i].polyline_id--;
+        }
+      }
+      //Remove the position html
+      //and replace it with destroy code.
+      remove_position_html(this);
     });
     return marker;
   }
+
+  // Figure out the position for a new marker.
+  function next_position(){
+    return $('.coord_position_data').length + 1;
+  }
+
+  // Figure out the index for a new marker.
+  function next_index(){
+    return marker_data.length;
+  }
+
+  // Remove the position input field
+  // and replace it with one that will
+  // trigger a destroy call.
+  function remove_position_html(marker){
+    var index = marker_data[marker.get('data_id')].html_id;
+
+    var destroy_elem = $('<input>').attr({
+      id: 'path_coords_attributes_' + index + '__destroy',
+      name: 'path[coords_attributes][' + index + '][_destroy]',
+      value: true,
+      type: 'hidden',
+      class: 'coord_destroy'
+    });
+    $('#path_coords_attributes_' + index + '_position').replaceWith(destroy_elem);
+  }
+
+  // Delete the marker from the map
+  // and remove the point from the polyline.
+  function delete_from_map(marker){
+    var index = marker_data[marker.get('data_id')].polyline_id;
+    console.log("Deleteing line: " + index);
+    polyline.getPath().removeAt(index);
+
+    marker.setMap(null);
+
+    marker_data[marker.get('data_id')].active = false;
+  }
 <% end %>
 
 <%= form_for([@layer, @path]) do |f| %>
@@ -86,7 +164,7 @@
   <%= f.fields_for :coords do |coord| %>
       <%= coord.hidden_field :latitude %>
       <%= coord.hidden_field :longitude %>
-      <%= coord.hidden_field :position %>
+      <%= coord.hidden_field :position, :class=>"coord_position_data" %>
   <% end %>
   </div>
 

public/javascripts/application.js

@@ -72,6 +72,7 @@ function add_coord_to_form(coord, i, holder){
   $('<input>').attr({
     id: 'path_coords_attributes_' + i + '_position',
     name: 'path[coords_attributes][' + i + '][position]',
+    class: 'coord_position_data',
     value: coord.position,
     type: 'hidden',
   }).appendTo(holder);