I am using angular-google-maps v-2.3.3. I am loading markers using the "markers" directive and using map "idle" event for some manipulations. My problem is, Every time when the user zoom in or zoom out or pan the map, "idle" event is getting fired n number of times based on the number of markers with in the bounds. For eg: If there are 40 markers, The idle event is getting called 40 times instead of once. Below is my code where I am setting up the idle event.
angular.extend(vm, {
map: {
center: { latitude: 47, longitude: 2 },
markersControl: {},
mapControl: {},
events: {
tilesloaded: function(map) {
$scope.$apply(function() {
vm.mapInstance = map;
});
var map = vm.map.mapControl.getGMap();
$timeout(function() {
google.maps.event.trigger(map, 'resize');
}, 100);
},
dragend: dragend,
idle: function() {
try {
var markers = vm.map.markersControl.getGMarkers();
var map = vm.map.mapControl.getGMap();
for (var i = 0; i < markers.length; i++) {
if (map.getBounds().contains(markers[i].getPosition())) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
} catch (err) {
// Handle error(s) here
}
}
},
window: {
closeClick: function() {
var markers = vm.map.markersControl.getGMarkers();
markers.forEach(function(v, i) {
v.setAnimation(null);
});
}
}
}
});