Angular-google-maps: Info window is leaking

Created on 18 Dec 2016  ·  4Comments  ·  Source: SebastianM/angular-google-maps

Issue description

If you are using marker with a visible info window - CPU usage growth up to 100% of the core. Tested with Chrome.

Steps to reproduce and a minimal demo of the problem

http://plnkr.co/edit/q0ttx1XbTCnB4DFujtRV?p=preview

Steps to reproduce:

  1. Open Chrome task manager (Menu - More Tools - Task Manager)
  2. Check that CPU usage by plunkr is low and doesn't grow
  3. Click "toggle info" button (Info window should be shown after the click)
  4. Monitor CPU usage for 1 minute (you'll see it growth over time)
  5. (Optional) Click "toggle info" button again (CPU usage stays high even after info window is closed)

Current behavior

Marker with an open info window uses more and more CPU over time

Expected/desired behavior

Constant CPU usage

angular2 & angular2-google-maps version

2.1.1 & 0.16.0

Other information

urgent AgmInfoWindow stale bug

Most helpful comment

I found a solution here: https://github.com/angular/angular/issues/10883#issuecomment-240423378
So what I did is call the infoWindow.open()/close() outside of Angular to avoid change detections:

map.component.html

<div *ngFor="let property of _properties">
  <agm-marker [latitude]="property.Lat"
              [longitude]="property.Lng"
              [iconUrl]="_markerIconUrl"
              (mouseOver)="_infoWindowOpen($event, infoWindow);"
              (mouseOut)="_infoWindowClose($event, infoWindow);">
  </agm-marker>
</div>
...
<agm-info-window #infoWindow>
</agm-info-window>

map.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
...
constructor(private _zone: NgZone) {...}
...
  private _infoWindowOpen(mouseEvent: any, infoWindow: any) {
    infoWindow.hostMarker = mouseEvent.marker;
    this._zone.runOutsideAngular(() => {
      infoWindow.open();
    });
  }
...
  private _infoWindowClose(mouseEvent: any, infoWindow: any) {
    this._zone.runOutsideAngular(() => {
      infoWindow.close();
    });
  }

All 4 comments

yes. I found same issue.
And i using angular2 too.
The reason is when info window opend, the page would detect changed again and again, like a loop. So the page would redraw again and again. Hurry up. it is a big issue.

Any update/progress on this issue? @SebastianM

I found a solution here: https://github.com/angular/angular/issues/10883#issuecomment-240423378
So what I did is call the infoWindow.open()/close() outside of Angular to avoid change detections:

map.component.html

<div *ngFor="let property of _properties">
  <agm-marker [latitude]="property.Lat"
              [longitude]="property.Lng"
              [iconUrl]="_markerIconUrl"
              (mouseOver)="_infoWindowOpen($event, infoWindow);"
              (mouseOut)="_infoWindowClose($event, infoWindow);">
  </agm-marker>
</div>
...
<agm-info-window #infoWindow>
</agm-info-window>

map.component.ts

import { Component, OnInit, NgZone } from '@angular/core';
...
constructor(private _zone: NgZone) {...}
...
  private _infoWindowOpen(mouseEvent: any, infoWindow: any) {
    infoWindow.hostMarker = mouseEvent.marker;
    this._zone.runOutsideAngular(() => {
      infoWindow.open();
    });
  }
...
  private _infoWindowClose(mouseEvent: any, infoWindow: any) {
    this._zone.runOutsideAngular(() => {
      infoWindow.close();
    });
  }

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ssypi picture ssypi  ·  27Comments

potham picture potham  ·  54Comments

jscti picture jscti  ·  22Comments

ramnes picture ramnes  ·  54Comments

lazarljubenovic picture lazarljubenovic  ·  30Comments