Navigating side menu without recreating views over and over in ionic2

I have this regular side menu setup in Ionic2 app.


import {Component, ViewChild} from '@angular/core';
import {Platform, ionicBootstrap, Nav} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';

import { MapPage } from './pages/map/map';
import { ContactPage } from './pages/contact/contact';
import { AboutPage } from './pages/about/about';

  templateUrl: 'build/pages/menu/menu.html'
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  private menu: any;
  rootPage: any = MapPage;
  public pages: Object[];

  constructor(private platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
    this.pages = [
      { title: 'Map', component: MapPage },
      { title: 'Dick pics', component: ContactPage },
      { title: 'Weird stuff', component: AboutPage }

    this.rootPage = MapPage;

  openPage(page) {


And heres the template for it, menu.html

<ion-menu side="left" [content]="content">
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>

I am using google map. Every time I open menu, my view with a map inside it gets reinitialized every time. Since I am using “onPageLoaded” view lifecycle event it also gets fired every time.

How can I initialize and load only single map (or any other) view instance and get back to it while navigating the side menu without a need to reinitialize it?

This has been brought up and talked about before here on the forum.

this.nav.setRoot actually clears the current navigation stack, and resets the root. So is behaving as expected.