How to destroy map?

[piernik]

In ionic pages are not completely destroyed. You are (in demo) creating map in ngOnInit so when You are leaving this page map is not destroyed. There are two new life cycle hooks: ionViewDidEnter and ionViewWillLeave where I could init and destroy map:

ionViewDidEnter() {
    this.map = GoogleMaps.create('map_canvas', mapOptions);
}

ionViewWillLeave() {
    this.map.destroy();
    this.map = null;
}

But when I come back to map page for the second time GoogleMapsEvent.MAP_READY event is not triggered. Even If I use (not one):

this.map.on(GoogleMapsEvent.MAP_READY)
        .subscribe(() => {});

Map itself is working, but I don't know when it's initiated.

[battika]

I understand your question however let me suggest a different method.

On first ionViewDidEnter() you can create a map like you do now.

On ionViewWillLeave you don't need to destroy the map, just do a setDiv(null) which will hide the map and retain all current settings, including zoom level, position, etc.

Now, again on ionViewDidEnter() when you already have a map, you can do a setDiv('map_canvas') as opposed to create. It will render your map in view again.

[piernik]

I see. I can do that. But what about memory leaks - is it a good practice?

[services4smb]

I have been using ngOnInit() and ngOnDestroy(), but I'm not sure it can prevent memory leaks. How do you check for memory leaks in your app?

  async ngOnInit() {
    await this.platform.ready();
    await this.loadMap();
  }

  ngOnDestroy() {
    if(this.map != undefined) { this.map.destroy(); }
  }

[piernik]

I don't :) I simply concern that map is not destroyed, but maybe I worry too much :)

[battika]

Not sure why you are worried about memory leaks, I suppose you are reusing the map anyway. But I leave it to you, it is a personal taste.