How to get all visible markers on current zoom level

Solution 1:

In Google Maps JavaScript API V3 we can use something like this:

let markers
let map
let bounds = map.getBounds()
markers.filter(m => m.isAdded).forEach(m => {
  if (bounds.contains(m.getPosition())) {
    // code for showing your object, associated with current marker
  }
})

Solution 2:

Use GMap2.getBounds() to find the bounding box. The use GLatLngBounds.containsLatLng() to check each marker to see if it is visible.

Solution 3:

I know you wanted API V2, but i had to correct some stuff i saw in @bruha's response for V3, in case someone comes looking for it:

var markers; // your markers
var map; // your map

for(var i = markers.length, bounds = map.getBounds(); i--;) {
    if( bounds.contains(markers[i].getPosition()) ){
        // code for showing your object
    }
}

going backwards through the array this way goes through the array of markers faster, plus we set the bounds into a variable before going into the loop so we're not requesting it every time we go through the loop, and the only request we have to make is if the specific marker lies inside the bounds.

EDIT: goofed my decrementer

EDIT: map.getBounds() should be, was map.getBounds

Solution 4:

If anyone is still needing an answer to this question, I have a complete working model on Codepen.io

Feel free to download it and tweak it for your needs. Just please change the API key to your own. (They're free)

https://codepen.io/pailwriter/pen/bGEpeRv

Here's the function to get the markers in viewport.

function showVisibleMarkers() {
    var bounds = map.getBounds(),
        count = 0;
                                   
    for (var i = 0; i < markers.length; i++) {
        var marker = markers[i],
            infoPanel = $('.info-' + (i+1) ); // array indexes start at zero, but not our class names :)
                                           
        if(bounds.contains(marker.getPosition())===true) {
            infoPanel.show();
            count++;
        }
        else {
            infoPanel.hide();
        }
    }
    
    $('#infos h2 span').html(count);
}