Google map is not displayed in a second view

Ionic Framework ionic-v3
1

Hi, I have been working with the google map plugin, the map works well on the first page, as you can see here:

image
page1.jpg720×1280 78.5 KB

This is my code:

map-view.html

<ion-header>

  <ion-navbar>
    <ion-title>mapView</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <button ion-button block (click)="mapa2()">Next Page</button>
  <ion-list>
    <ion-item>
      <ion-label>Nick</ion-label>
      <ion-input type="text" [(ngModel)]="doc"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" [(ngModel)]="pss"></ion-input>
    </ion-item>
    <button ion-button full color="primary" (click)="login()">
      Login
    </button>
  </ion-list>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

map-view.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';

import {
 GoogleMaps,
 GoogleMapsEvent,
 LatLng
} from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-map-view',
  templateUrl: 'map-view.html',
})
export class MapView {

  public doc:string;
  public pss:string;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              private googleMaps: GoogleMaps, 
              public platform:Platform, 
              public loginCtrl:LoginService) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MapView');
  }

  mapa2(){
    this.navCtrl.push('Map2');
  }

  ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

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

    console.log("Inicializo el mapa");

      
      map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{
        let myPosition = new LatLng(43.0741904, -89.3809802);
              map.animateCamera({target: myPosition,zoom:10});
              map.addMarker({
                'position':myPosition,
                'title': 'hi!'
              });
              
      }).catch(()=>console.log("GoogleMap is not available"));
 }
}

On the second page the map is no longer displayed, but enter in the function:

image
Page 2.JPG878×597 20.7 KB

The code (is the same):

map2.html

<ion-header>

  <ion-navbar>
    <ion-title>map2</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div #map id="map" style="height:100%;"></div>
</ion-content>

map2.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';

import {
 GoogleMaps,
 GoogleMapsEvent,
 LatLng
} from '@ionic-native/google-maps';

@IonicPage()
@Component({
  selector: 'page-map2',
  templateUrl: 'map2.html',
})
export class Map2 {

  constructor(public navCtrl: NavController, public navParams: NavParams, 
              public platform:Platform, 
              private googleMaps: GoogleMaps) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad Map2');
  }

  ngAfterViewInit() {
    this.platform.ready().then(() => {
      this.loadMap();
    });
  }

  loadMap() {
   let element: HTMLElement = document.getElementById('map');
   let map = this.googleMaps.create(element);
    console.log("Inicializo el mapa");

      
      map.one(GoogleMapsEvent.MAP_READY).then((data:any)=>{
        let myPosition = new LatLng(43.0741904, -89.3809802);
              map.animateCamera({target: myPosition,zoom:10});
              map.addMarker({
                'position':myPosition,
                'title': 'Hi2'
              });
              
      }).catch(()=>console.log("GoogleMap is not available"));
  }
}

How can I show the map on other pages when navigate on the app!

Thanks!,