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
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. (I'm using gon to communicate between rails and jquery). 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.
Why are neither the #notice_list nor the map markers being updated?
EDIT:
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. gon.markers is an array that was created in the notices controller inside ruby, do I have to somehow turn it into a javascript array? I thought gon did this for you? 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 this object is handed to makeMarkers, something goes wrong.
