How to get all visible markers on current zoom level

Question

Here are some points:

1. I have some markers on the map and records associated with it on the right panel besides the map. They are connected via numeric id, whic

Answer 1

It's easy code. Try this code.

private boolean CheckVisibility(Marker marker)
{
    if(googleMap != null)
    {
        //This is the current user-viewable region of the map
        LatLngBounds latLongBounds = googleMap.getProjection().getVisibleRegion().latLngBounds;

            if(latLongBounds.contains(marker.getPosition()))
                   //If the item is within the the bounds of the screen
                  return true;
            else
                  //If the marker is off screen
                  return false;
    }
    return false;
}

Answer 2

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

Answer 3

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);
}

Answer 4

My code snippet

private boolean isAnyMarkerVisible(LatLng ll) {
    if(gMap != null && markersData != null) {
        final LatLngBounds latLongBounds = LatLngBounds.builder().include(ll).build();
        for (Store store : markersData) {
            if (latLongBounds.contains(store.getLatLng())) {
                return true;
            }
        }
    }
    return false;
}

Answer 5

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

let markers; // your markers
let map; // your map
let bounds = map.getBounds() 
for (let i=0; i<markers.length; i++){
    if(bounds.contains(markers[i].getPosition()) ){
        // code for showing your object, associated with markers[i]
    }
}

Answer 6

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