dylanfprice / angular-gm

AngularJS Google Maps Directives
MIT License
197 stars 47 forks source link

After $scope.$broadcast('gmMarkersRedraw'); some markers disappear #43

Closed smartcris closed 10 years ago

smartcris commented 10 years ago

Hi there, I'm experiencing a strange issue with markers, after the '$scope.$broadcast('gmMarkersRedraw');' some of them disappear. I followed your example and make a .run(function(angulargmContainer) ....) , that contain a search box and a 'google.maps.event.addListener', this listener send the new bounds to a service every time the user zoom or make a search, the service then make a query to the database and ask for data inside the new boundaries. The data are collected properly, I can see and check them in a data grid, but not all the markers are rendered in the map. After being rendered one time they disappear on a new zoom. Do you have any idea what could cause this issue? Thx in advance

dylanfprice commented 10 years ago

You'll need to provide a jsfiddle or plunker for me to be able to help you.

I followed your example and make a .run(function(angulargmContainer) ....) , that contain a search box and a 'google.maps.event.addListener', this listener send the new bounds to a service every time the user zoom or make a search, the service then make a query to the database and ask for data inside the new boundaries.

I don't think that's the best approach as gm-map can already bind the bounds of the map to a scope variable. In your scope you should be able to just $watch the bounds and act on that.

<gm-map gm-bounds="myBounds" ...></gm-map>

In your controller:

...
$scope.$watch('myBounds', function(bounds) {
  // send updated bounds to service here
});
...
smartcris commented 10 years ago

Hi thx for the reply, after several hours of 'newbie coding' I came up with this module: http://jsfiddle.net/z69UR/ Any help would be greatly appreciated.

smartcris commented 10 years ago

I tried what you suggested, but now every short scroll of the map send a get request to the server, (sending like 3-5 requests in a second) and then I get 504 method not allowed.

wpalahnuk commented 10 years ago

The bounds are updated very rapidly, potentially many times per second. They are changed every time the drag event fires.

You could try sending the request on the dragend and zoom_changed events which only fires when the user is done moving the map around or zooming.

dylanfprice commented 10 years ago

Yeah sorry about that should have remembered how often the bounds changed. What wpalahunk suggested should work:

<gm-map ... gm-bounds="bounds" gm-on-dragend="sendGET()"></gm-map>
...
$scope.sendGET = function() {
   var bounds = $scope.bounds;
   // send GET request
}
...

Sounds like this is solved? I'm going to close it, feel free to reopen it if you're still having problems.