Strange behaviour with navigation and google map

After a lot of fight with the plugin. i did manage with help to display my google map!

if it’s called from the login page with
this.navCtrl.setRoot(PrincipalPage);

It show a General map without marker!

If it’s called from the side menu:
this.rootPage = page.component;

it show the proper map with the marker!

I tried to do the same navigation system in my login page and on my side menu.
But it didn’t work!

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AuthPage } from '../pages/auth/auth';
import { PrincipalPage } from '../pages/principal/principal';
import { SportfilterPage } from '../pages/sportfilter/sportfilter';
import { Events } from 'ionic-angular';



@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav; Nav;
  rootPage:any = AuthPage;
  pages: Array<{title: string, component: any}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private events: Events) {
    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.
      statusBar.styleDefault();
      splashScreen.hide();
    });
    this.pages = [
      { title: 'Sport\'s Map', component: PrincipalPage },
      { title: 'Sport\'s Filter', component: SportfilterPage },
    ];
  }
    openPage(page) {
      this.rootPage = page.component;
  }
   menuClosed() {
    this.events.publish('menu:closed', '');
  }
  menuOpened() {
    this.events.publish('menu:opened', '');
  }


}

previouspage.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import {PrincipalPage} from '../principal/principal';


@Component({
  selector: 'page-auth',
  templateUrl: 'auth.html'
})


export class AuthPage {
    userData: any;

  constructor(public navCtrl: NavController,private facebook: Facebook) {

  }

  loginWithFB() {
    //this.navCtrl.push(PrincipalPage);
    this.navCtrl.setRoot(PrincipalPage);
    /*this.facebook.login(['email', 'public_profile']).then((response: FacebookLoginResponse) => {
      this.facebook.api('me?fields=id,name,email,first_name,picture.width(720).height(720).as(picture_large)', []).then(profile => {
        this.userData = {email: profile['email'], first_name: profile['first_name'], picture: profile['picture_large']['data']['url'], username: profile['name']}
      });
    }); */
  }

gmap.ts

import { Component } from '@angular/core';
import { NavController, NavParams, MenuController,Platform } from 'ionic-angular';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
import { Events } from 'ionic-angular';

@Component({
    selector: 'page-principal',
    templateUrl: 'principal.html',


})

export class PrincipalPage {
    map: GoogleMap;




    constructor(private events: Events,private googleMaps: GoogleMaps, public menuCtrl: MenuController, public navCtrl: NavController, public navParams: NavParams, public platform: Platform) {
            this.events.subscribe('menu:opened', () => {
            this.map.setClickable(false);
        });

            this.events.subscribe('menu:closed', () => {
            this.map.setClickable(true);
        });

    }

    
     ionViewDidEnter() {
            this.loadMap();
    } 


    loadMap() {
        let element: HTMLElement = document.getElementById('map');
        this.map  = this.googleMaps.create(element);

        // listen to MAP_READY event
        // You must wait for this event to fire before adding something to the map or modifying it in anyway
        this.map.one(GoogleMapsEvent.MAP_READY).then(
            () => {
                console.log('Map is ready!');
                // Now you can add elements to the map like the marker
            }
        );
        // create LatLng object
        let ionic: LatLng = new LatLng(43.0741904, -89.3809802);

        // create CameraPosition
        let position: CameraPosition = {
            target: ionic,
            zoom: 100,
            tilt: 10
        };

        // move the map's camera to position
        this.map.moveCamera(position);

        // create new marker
        let markerOptions: MarkerOptions = {
            position: ionic,
            title: 'Ionic'
        };

        this.map.addMarker(markerOptions)
            .then((marker: Marker) => {
                marker.showInfoWindow();
        });
    }
}

Thanks a lot for your help!