Angular Google Maps - Visible Markers In Bounds - angularjs

Question

I've successfully implemented angular-google-maps on a local project of mine with list of markers that's being put on my map.
But how can I get the "Visible Markers In Bounds"? (the angular-way)
jQuery example: http://jsfiddle.net/glafarge/mbuLw/
At the moment I've attached an event inside my controller on "idle" which gets triggered whenever map changes (zoom et). The foreach loops through my markers, but I'm just not sure how to perform the "contains(marker.getPosition())" because that's not a function in the angular version of google maps.
events: {
idle: function () {
console.log("change triggered");
angular.forEach($scope.markers, function(marker, key) {
console.log("set visible markers here");
});
}
}
Bounds are accessible in $scope.map.bounds and looks like this:
$scope.map.bounds = {
northeast: {
latitude: 51.219053,
longitude: 4.404418
},
southwest: {
latitude: -51.219053,
longitude: -4.404418
}
}
The map object is accessible in $scope.mapRef:
uiGmapIsReady.promise().then(function (map_instances) {
$scope.mapRef = $scope.map.control.getGMap();
});

Answer 1

Inspired by MayK's answer I solved it with the following:
idle: function (map) {
$timeout(function() {
var visibleMarkers = [];
angular.forEach($scope.markers, function(marker, key) {
if ($scope.map.bounds.southwest.latitude < marker.coords.latitude
&& marker.coords.latitude < $scope.map.bounds.northeast.latitude
&& $scope.map.bounds.southwest.longitude < marker.coords.longitude
&& marker.coords.longitude < $scope.map.bounds.northeast.longitude) {
visibleMarkers.push(marker);
}
});
$scope.visibleMarkers = visibleMarkers;
}, 0);
}

Answer 2

add an events for bounds_changed whenever there is a change, iterate over your markers: for each marker if this condition (bounds.sw.lat< marker.lat < bounds.ne.lat and bounds.sw.lon < marker.lon < bounds.ne.lon ) is true, then your marker is visible, so you can append it to a list of visible markers.
vm.map.events = {
bounds_changed: function(map) {
vm.visibleMarkers=[];
for (var i = 0; i < vm.beaconMarkers.length; i++) {
if (vm.map.bounds.southwest.latitude < vm.beaconMarkers[i].latitude && vm.beaconMarkers[i].latitude < vm.map.bounds.northeast.latitude && vm.map.bounds.southwest.longitude < vm.beaconMarkers[i].longitude && vm.beaconMarkers[i].longitude< vm.map.bounds.northeast.longitude) {
vm.visibleMarkers.push(
vm.beaconMarkers[i]
);
}
}
}
};

Answer 3

Sadly I just discovered a bug in the "accepted solution". If you for example drag your map northeast of Asia it will return a negative longitude which makes the condition return false.
For now I resolved it by using google maps build-in functionality like beneath. However though, I don't think this is the best approach so I'm still looking for a better approach:
var visibleMarkers = [];
var bounds = $scope.mapRef.getBounds();
angular.forEach($scope.markers, function(marker, key) {
var gMarker = new google.maps.Marker({
position: {
lat: marker.coords.latitude,
lng: marker.coords.longitude
}
});
if(bounds.contains(gMarker.getPosition())===true) {
visibleMarkers.push(marker);
}
});
$scope.visibleMarkers = visibleMarkers;

Answer 4

Used Map Object's getBounds() method then use contains() method to detect whether the lat lng is within bound