How to get all visible markers on current zoom level
Here are some points:
- 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, which is stored as a property of marker.
- All the markers are stored in an array.
- When the user zooms in the map, records, associated to only visible markers should be shown on the right panel.
So, how to get the list of all visible markers on the current zoom level? I've searched over the internet and didn't find something useful. Some kind of what I'm trying to achieve开发者_如何学编程 could be found here
In Google Maps JavaScript API V3 we can use something like this:
let markers
let map
const bounds = map.getBounds()
markers.filter(m => m.isAdded).forEach(m => {
if (bounds.contains(m.getPosition())) {
// code for showing your object, associated with current marker
}
})
Use GMap2.getBounds()
to find the bounding box. The use GLatLngBounds.containsLatLng()
to check each marker to see if it is visible.
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
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);
}
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;
}
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;
}
精彩评论