Filtering googlemaps with markerclusterer for displaying only markers visible on the screen (on a sidebar) - contents loaded via xml

Question

I am running this website at http://arquitectospelomundo.com which is googlemap based. Thanks to this community I have already managed to make it read data from a xml file, process it into a markerclusterer object and make it display a sidebar with the content as well. Now I was looking to see if it was possible to filter that sidebar with only the markers seen on the screen (zooming in would remove items from that list). Have already tried with no success since markerclusterer is giving me a hard time. Any help appreciated. Thanks!

Answer 1

Observe the bounds_changed-event of the map and then loop over the markers and check if the bounds of the map contains the markers:

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  $(e).add($(e).next('br'))
    .css('display',(bounds.contains(gmarkers[i].getPosition()))?'block':'none');
});
});

This will filter the sidebar-elements, but lazyload will not notice the change. But you may force lazyload to load the images by triggering the scroll-event:

google.maps.event.addListener(map,'bounds_changed',function(){
var bounds=map.getBounds();
$('#side_bar a').each(function(i,e){
  var c=bounds.contains(gmarkers[i].getPosition());
  $(e).add($(e).next('br')).css('display',c?'block':'none')
   .find('img').trigger((c)?'scroll':'void');
});
});