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. There are two problems:
1) The page does not update the #notice_list. Why?
2) 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?
Aucun commentaire:
Enregistrer un commentaire