angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API
http://angular-ui.github.io/angular-google-maps
2.52k stars 1.07k forks source link

Map become very laggy after dom manipulation #1494

Open anasYoubi opened 8 years ago

anasYoubi commented 8 years ago

Hello everyone

I am currently using angular-google-maps in order to display a large number of markers (around 4000), in order to optimise to markers display on the map I used the Marker clustering alongside the spider effect.

Once the page load the interaction with it is okay, I can see and move on the map freely. but once I scroll down the page or click on something, then I return to the map it becomes too slow I need to wait around 4 to 6 second for it to move.

I have done some research and it seems that in order to gain some performance you need to work with ui-gmap-markers (which I already done), then I remove the binding using angle (::) still no result.

my question is the following: 1- what is the limit of angular-google-maps (number of markers). 2- how can I optimise my approach to this issue

nmccready commented 8 years ago

Optimizations are clustering on the backend as well. Showing markers types at different zoom levels etc. Also try disabling chunking via the chunk attribute. I plan on making another 3rd party library to start replacing many of the iterators in the library which will utilize for in as it is known to be faster. This will be shared code among angular-leaflet-directive and this lib.

https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/services/leafletIterators.js

nmccready commented 8 years ago

Can you make an example with similar problems as this would help a lot.