Question

When user pans the map, I make and ajax request to the server and get all the markers that fall into the new bounds, something almost identical to what is described here: Dynamically load Google Maps Markers with gmaps4rails

My problem is that when I use replaceMarker all the markers on the map are recreated therefore each of them flickers onces. This really annoys me.

If I use addMarkers, I don’t get the flicker effect, but my sidebar gets screwed because;
1) The markers which are left out of the bounds after pan, are not removed from my marker list.
2) Some duplicates are added to my marker list – markers that fall into intersection of old and new bounds.

I tried modifying the addmarkers function but nothing good came out of it.

Answer 1

This is how I changed the addMarkers function. Comparing the new_markers set to the old one to find out which ones to remove and leave the already existing ones alone.

addMarkers : (new_markers) ->
  #update the list of markers to take into account
  @resetSidebarContent()
  added_markers = (marker for marker in new_markers when ($.grep(@markers, (a) -> a.id == marker.id).length == 0))
  removed_markers = (marker for marker in @markers when ($.grep(new_markers, (a) -> a.id == marker.id).length == 0))
  for marker in removed_markers
    @clearMarker(marker)
    @markers.remove(marker)
  @markers = @markers.concat(added_markers)
    #put markers on the map
  @create_markers()
  @adjustMapToBounds()