AGM is way too slow!

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 <agm-info-window> (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”,

[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.

[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.