Angular-google-maps: AGM is way too slow!

[nylz]

AGM is pretty slow, when you have 500+ Markers. There are pretty much usecases, where this is a normal amount. In my current project, there are many thousands. (Of course, I use the MapClusterer).
Some Numbers (similar code as in tutorial):

• AGM Page loads in 40+ seconds.
• if I remove the (demo content), it's still more than the half seconds.
• my old JQuery-Implementation renders same content / data with info-windows and Clusterer within 6.x seconds.

reproduce by modifying plunkr-code something like:

markers: marker[];
  for(i = num;i>=1000;i--) {
   markers.push({
    {
          lat: 51.673858,
          lng: 7.815982,
          label: 'A',
          draggable: true
      } 
   });
  }

(maybe fill values with randoms)

My current solution is to "iframe" the content of my old jquery-implementation. Not a beautiful solution, but a fast workaround.

Most answers I found to this issue were like '500+ is too much...' -> troll-postings. Even 5000+ can easily be handled by a simple gmap + jquery implementation.

"@agm/core": "^1.0.0-beta.2",
"@agm/js-marker-clusterer": "^1.0.0-beta.2",

[aarontoys]

@nylz I had the same issue trying to render 1000+ points. I switched to ChangeDetectionStrategy.OnPush and that really helped. See https://github.com/SebastianM/angular-google-maps/issues/520#issuecomment-242485390. I can now render all these points (with clusters and info windows) in about 5 - 6 seconds.

However, I still had the issue when subsequently filtering this list down to 150 or even 20 items [Solved!]. You can see https://github.com/SebastianM/angular-google-maps/issues/1285 for more info. I've post my solution and there's another example there as well.

[nylz]

Hey, thank you very much, for that hint. Now it is even faster, than my jQuery-implementation. Im pretty new to Angular, so I first had to click through this presentation: https://pascalprecht.github.io/slides/angular-2-change-detection-explained/#/
to understand, what the real problem here was.
What I did now:
`changeDetection: ChangeDetectionStrategy.OnPush
...

constructor(... ... private cd: ChangeDetectorRef) {
...

onGotResponseFromMyService(resObj: MyResponse) {
// enrich component with received data
// and ... finally:
this.cd.detectChanges();
}
`
Imho, the name OnPush is a bit confusing. Would be easier to understand if it was labeled ChangeDetectionStrategy.Manually

however. Thank You for support.

[VictorChatterji]

@nylz I had the same issue trying to render 1000+ points. I switched to ChangeDetectionStrategy.OnPush and that really helped. See #520 (comment). I can now render all these points (with clusters and info windows) in about 5 - 6 seconds.

However, I still had the issue when subsequently filtering this list down to 150 or even 20 items [Solved!]. You can see #1285 for more info. I've post my solution and there's another example there as well.

@aarontoys thanks for the magic trick ! It worked like a charm actually

[scode24]

I had the same issue. I had AGM map with 3000+ markers integrated in my project. It's became very slow, as a solution added change detection strategy onpush on app component as declaring on map component didn't improve performance much. Is there any better solution for this. For all these markers we are having agm-info-window with bunch of data. How to improve agm map performance with high nos of markers.

[ghost]

@scode only display markers that are inside the bounds