title: google map on another page ionic 2
body: <p>I have been working with the google map plugin whit ionic v2-3, the map works well on the first page, as you can see here:</p>
  
  <p><a href="https://i.stack.imgur.com/uSbUV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uSbUV.jpg" alt="map on first page"></a></p>
  
  <p><em>FYI: I already installed the plugin and generated the API key</em></p>
  
  <p>This is my code:</p>
  
  <p><strong>map-view.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;mapView&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;button ion-button block (click)="mapa2()"&gt;Next Page&lt;/button&gt;
    &lt;ion-list&gt;
      &lt;ion-item&gt;
        &lt;ion-label&gt;Nick&lt;/ion-label&gt;
        &lt;ion-input type="text" [(ngModel)]="doc"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;ion-item&gt;
        &lt;ion-label&gt;Password&lt;/ion-label&gt;
        &lt;ion-input type="password" [(ngModel)]="pss"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;button ion-button full color="primary" (click)="login()"&gt;
        Login
      &lt;/button&gt;
    &lt;/ion-list&gt;
    &lt;div #map id="map" style="height:100%;"&gt;&lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>map-view.ts</strong></p>
  
  <pre><code>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(() =&gt; {
        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)=&gt;{
          let myPosition = new LatLng(43.0741904, -89.3809802);
                map.animateCamera({target: myPosition,zoom:10});
                map.addMarker({
                  'position':myPosition,
                  'title': 'hi!'
                });
  
        }).catch(()=&gt;console.log("GoogleMap is not available"));
   }
  }
  </code></pre>
  
  <p><strong>On the second page</strong> the map is no longer displayed, but enter in the function:</p>
  
  <p><a href="https://i.stack.imgur.com/hIMPB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIMPB.jpg" alt="Second page, does not show the map"></a></p>
  
  <p>The code (is the same):</p>
  
  <p><strong>map2.html</strong></p>
  
  <pre><code>&lt;ion-header&gt;
  
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;map2&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  
  &lt;/ion-header&gt;
  
  
  &lt;ion-content&gt;
    &lt;div #map id="map" style="height:100%;"&gt;&lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><strong>map2.ts</strong></p>
  
  <pre><code>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(() =&gt; {
        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)=&gt;{
          let myPosition = new LatLng(43.0741904, -89.3809802);
                map.animateCamera({target: myPosition,zoom:10});
                map.addMarker({
                  'position':myPosition,
                  'title': 'Hi2'
                });
  
        }).catch(()=&gt;console.log("GoogleMap is not available"));
    }
  }
  </code></pre>
  
  <p>How can I show the map on other pages when navigate on the app!</p>
  
  <p>Thanks in advance,</p>