title: Ionic map loads when i first enter the page but after navigating back it does not load
body: <p>I am working on a hiking app based on IONIC geolocation, i have been trying to load the map but it always works well for the first time but when i go back to other tabs and when i return to that map page the page goes blank.</p>
  
  <blockquote>
    <p>This is the code for the map-geolocation</p>
  </blockquote>
  
  <pre><code>import { Component, ViewChild, ElementRef } from '@angular/core';
  import {Navbar, NavController, NavParams, Platform} from 'ionic-angular';
  import * as firebase from 'Firebase';
  import { Geolocation } from '@ionic-native/geolocation';
  import { Device } from '@ionic-native/device';
  import {Hike} from "../../shared/hike";
  
  
  declare var google: any;
  
  @Component({
    selector: 'page-Geoloc',
    templateUrl: 'Geoloc.html'
    })
  export class Geoloc {
  
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  markers = [];
  ref = firebase.database().ref('geolocations/');
  hike: Hike;
  
  @ViewChild(Navbar) navBar: Navbar;
  constructor(public navCtrl: NavController,
            public navParams: NavParams,
            public platform: Platform,
            private geolocation: Geolocation,
            private device: Device) {
  
  this.hike = navParams.get('data');
  
  
  }
  
  initMap() {
  this.geolocation.getCurrentPosition().then((resp) =&gt; {
  
    let mylocation = new 
    google.maps.LatLng(resp.coords.latitude,resp.coords.longitude);
    this.map = new google.maps.Map(this.mapElement.nativeElement, {
      zoom: 15,
      center: mylocation
    });
   });
   google.maps.event.trigger(this.map, 'resize');
   let watch = this.geolocation.watchPosition();
   watch.subscribe((data) =&gt; {
   this.deleteMarkers();
   this.updateGeolocation(this.device.uuid, 
   data.coords.latitude,data.coords.longitude);
   let updatelocation = new 
   google.maps.LatLng(data.coords.latitude,data.coords.longitude);
      let image = 'assets/imgs/blue-bike.png';
      this.addMarker(updatelocation,image);
      this.setMapOnAll(this.map);
    });
  } 
  
   addMarker(location, image) {
     let marker = new google.maps.Marker({
     position: location,
     map: this.map,
     icon: image
    });
    this.markers.push(marker);
   }
  
   setMapOnAll(map) {
   for (var i = 0; i &lt; this.markers.length; i++) {
   this.markers[i].setMap(map);
     }
   }
  
   clearMarkers() {
   this.setMapOnAll(null);
   }
  
   deleteMarkers() {
     this.clearMarkers();
     this.markers = [];
   }
  
   updateGeolocation(uuid, lat, lng) {
       let timestamp = Date();
       if(localStorage.getItem('mykey')) {
  
  
  firebase.database().ref('geolocations/'+localStorage.getItem('mykey')).set({
      uuid: uuid,
      latitude: lat,
      longitude : lng,
      timestamp : timestamp
    });
  } else {
    let newData = this.ref.push();
    newData.set({
      uuid: uuid,
      latitude: lat,
      longitude: lng,
      timestamp : timestamp
    });
    console.log(newData.key);
    localStorage.setItem('mykey', newData.key);
    }
  }
  
  ionViewDidLoad() {
   this.navBar.backButtonClick = (e:UIEvent)=&gt;{
     // todo something
     this.navCtrl.pop();
   }
  
   this.platform.ready().then(() =&gt; {
    this.initMap();
   });
   this.ref.on('value', resp =&gt; {
    this.deleteMarkers();
    snapshotToArray(resp).forEach(data =&gt; {
      if (data.uuid !== this.device.uuid){
        var currentTime = new Date().getSeconds();
        if (data.timestamp + 25 &lt;= currentTime) {
          let image = 'assets/imgs/green-bike.png';
          let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
          this.addMarker(updatelocation, image);
          this.setMapOnAll(this.map);
        }
        else {
          let image = 'assets/imgs/blue-bike.png';
          let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
          this.addMarker(updatelocation, image);
          this.setMapOnAll(this.map);
        }
      }
      else {
        let image = 'assets/imgs/blue-bike.png';
        let updatelocation = new google.maps.LatLng(data.latitude, data.longitude);
        this.addMarker(updatelocation, image);
        this.setMapOnAll(this.map);
        }
      });
    });
  
  }
  
  
  }
  
  export const snapshotToArray = snapshot =&gt; {
   let returnArr = [];
  
  snapshot.forEach(childSnapshot =&gt; {
    let item = childSnapshot.val();
    item.key = childSnapshot.key;
    returnArr.push(item);
  });
  
   return returnArr;
  };
  </code></pre>
  
  <p>I have tried some solutions by changing the lifecycle elements and by using this.maps.remove(); but they dont work</p>