Passing array to javascript method with gon

[Bazley]

In rails I have a bunch of 'notices' in the html, each of which has latitude and longitude attributes for a corresponding marker on a google map. I send an ajax request to the notices controller when the google map boundaries change. It returns all notices with coordinates inside the map boundaries, and also an array containing all the information necessary for the map to place the corresponding markers.

javascript in the view:

var initialize, map, mapOptions;
var markers = [];

initialize = function() {
  mapOptions = {
    center: {lat: 51, lng: 0},
    zoom: 9
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'zoom_changed', dealWithNewWindow);
  google.maps.event.addListener(map, 'dragend', dealWithNewWindow);
  function dealWithNewWindow(event) {
    var bounds = map.getBounds();
    var nelat = bounds.getNorthEast().lat();
    var swlat = bounds.getSouthWest().lat();
    var nelng = bounds.getNorthEast().lng();
    var swlng = bounds.getSouthWest().lng();
    var mapBounds = {NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng};
    $.ajax({
      type     : 'POST',
      url      : '/maprequest', 
      dataType : 'script',
      data     :  {  NElatitude:nelat, SWlatitude:swlat, NElongitude:nelng, SWlongitude:swlng }
    });
  };
  dealWithNewWindow(e);
};

makeMarkers = function(markerArray) {
  // alert("Alert 1.");
  for (m = 0; m < markerArray.length; m++) {
    // alert("Alert 2.");
    (function(marka) {
      var goomap = google.maps;
      var marker = new goomap.Marker({
        map: map,
        position: new goomap.LatLng(marka.lat, marka.lng),
        infowindow: marka.infowindow,
        id: marka.id
      });
      markers.push(marker);
    }(
      markerArray[m]
    ));
  }
};

notices controller show action:

def show
  respond_to do |format|
    format.html
    format.js do
      @notices = noticefeed
      @markers = []
      @notices.each do |notice|
        marker = Marker.new(notice.latitude, notice.longitude, notice.content, notice.id)
        @markers.push(marker)
      end
      gon.markers = @markers
    end
  end
end

private
  def noticefeed
    nelat = params[:NElatitude]
    swlat = params[:SWlatitude]
    nelng = params[:NElongitude]
    swlng = params[:SWlongitude]
    Notice.where("      latitude  < ?
                    AND latitude  > ?
                    AND longitude < ?
                    AND longitude > ?  ", nelat, swlat, nelng, swlng )
  end

Code to construct Marker:

class Marker
  attr_accessor :lat, :lng, :infowindow, :id
  def initialize(lat, lng, infowindow, id)
  @lat = lat
  @lng = lng
    @infowindow = infowindow
    @id = id
  end
end

show.js.erb:

$("#notice_list").html("<%= escape_javascript(render @notices) %>")
makeMarkers(gon.markers);

The browser console shows that the ajax is sent correctly and that the server responds without a problem. The line $("#notice_list").html("<%= escape_javascript(render @notices) %>") is providing the correct html. The problem is that the markers on the map are not created or updated. When I uncomment alert("Alert 1."); the alert appears, meaning it is successfully calling the makeMarkers method, but alert("Alert 2."); never appears when it is the only one uncommented. Therefore makeMarkers is being called, but it never makes it into the for (m = 0; m < markerArray.length; m++) loop. Therefore it mustn't be happy with being passed gon.markers.

In show.js.erb, when I replace makeMarkers(gon.markers); with makeMarkers([1,2,3]) it successfully enters the for loop ("Alert 2" appears). There must be something wrong with gon.markers. I've checked using debugger that gon.markers and @markers are arrays or markers, and they are:

gon.markers:

[#<Mymodule::Marker:0x0000010ded1c38 @lat=51.9714995840941, @lng=-1.60000814589637, @infowindow="This is great!!", @id=904>]

So when gon.markers is handed to makeMarkers, something goes wrong. Why is this? Am I using gon improperly?