MarkerManager visible markers

Question

i'm using MarkerManager v3 and google maps to display with a lot of markers. Now everything works perfect, but I can't seem to find a way to show only the markers that the markermanager is showing. I am aware of the method getMarkerCount which returns the number of visible markers in the zoom, but I need the information from the markers like id, title etc. to update an table containing points on dragend-event.

I tried

    google.maps.event.addListener(map, "dragend", function() {
        for(var i = gMarkers.length, bounds = map.getBounds(); i--;) {
            if( bounds.contains(gMarkers[i].getPosition()) ){
                console.log(gMarkers[i].getVisible());
            }
        }
    });

This method returns all markers even though they are not visible at the current zoom-level? Any idea of how I can achieve this?

To be more precise, see my test-site http://frankmyhre.dk/mapping/test.php, where the table should reflect the markers visible (red icon) on the map within the bounds

Answer 1

I consider my solution as being "quick and dirty". I think it should be doable, by using the plugin.

Anyway, the result is what you required, I think. The code I show is inside initialize; 1 extra function and a replacement of zoom_changed and dragend

google.maps.event.addListener(map, "zoom_changed",function() {
  var zoom = map.getZoom();
  $('#zoom').text(zoom);
  $('#marker_count').text(mgr.getMarkerCount(zoom));
  timer = setTimeout(visibleMarkersInTable, 400);
});
google.maps.event.addListener(map, "dragend", function() {
  timer = setTimeout(visibleMarkersInTable, 400);
});
var timer; 
function visibleMarkersInTable () {
  clearTimeout(timer);  // make sure you don't check, while the user is panning or zooming.; so this blocks a lot of temporary checks
  $('table tbody').empty();
  for (i in gMarkers) {
    var markerVisible = gMarkers[i].map ? true : false;
    if(markerVisible) {
      // mind you, the marker might be on the map, but just outside of the boundaries.
      // so let's check those
      if (map.getBounds().contains(gMarkers[i].getPosition()) ) {
        $('table tbody').append('<tr id="' + gMarkers[i].id + '"><td>' + gMarkers[i].title + '</td><td>' + gMarkers[i].getPosition().lat() + '</td><td>' + gMarkers[i].getPosition().lng() + '</td></tr>');
      }
    }
  }
}

Feel free to tamper with that 400ms delay in the setTimeout; set it to whatever suits you. Especially when you have hundreds of markers. No idea how slow this would get.