My Ionic2 is Geolocation Map is loaded only for the first time, after that it shows blank screen


#1

in my html

 <ion-content>
    <div #map id="map"></div> 
  </ion-content>

In my TS

export class HistoryDetailsPage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: any;
 
  constructor(public navCtrl: NavController, public geolocation: Geolocation) {
    

  
 
  }

  ionViewDidLoad()
  
  {
    this.loadMap();
  }
 
  loadMap(){
 
    this.geolocation.getCurrentPosition().then((position) => {
 
      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
 
      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
 
    }, (err) => {
      console.log(err);
    });
 
  }

}

#2

Try something like this to reset the map container on each view enter event.

  initialMapLoad: boolean = true;

  //...

  resetMapContainer(div:string,visible:boolean){
    setTimeout(()=>{
      if(this.map){
        this.map.setDiv(div);
        this.map.setVisible(visible);
      }
    },600) // timeout is a bit of a hack but it helps here
  }

  ionViewWillEnter(){
    if (!this.initialMapLoad) {
      // subsequent loads...
      this.resetMapContainer('map',true); // assumes div has id of map
    } else {
      // first load...
      this.initialMapLoad = false;
    }
  }

Ionic map loads when i first enter the page but after navigating back it does not load
Ionic Native Google Maps plugin: map disappears after navigating to internal page, possible stacking issue