My map takes long before loading after navigating from another page.

[kennedyngigi4]

I have a problem, my map is in the home page and I have other pages eg: favorites, support etc. If I navigate from example: favorites to home the map takes more than a minute before loading. What could be the issue? here is part of the code.

ngOnInit() {
      this.getRegisteredPartners(); 
}

  getRegisteredPartners(){
    this.mapservice.getPartners().subscribe((partnerData) => {
      this.registeredPartners = partnerData.map((data) => {
        return{
          id: data.payload.doc.id,
          location: data.payload.doc.data()['bizLocation'],
          lat: data.payload.doc.data()['Lat'],
          lng: data.payload.doc.data()['Lng'],
          mobile: data.payload.doc.data()['mobile'],
          title: data.payload.doc.data()['name'],
          registration: data.payload.doc.data()['registered'],
          verified: data.payload.doc.data()['active_state'],
          garaPic: data.payload.doc.data()['garaPicture'],
          infoDesc: data.payload.doc.data()['infoDesc'],
          weekdays: data.payload.doc.data()['weekdays'],
          sat: data.payload.doc.data()['sat'],
          sun: data.payload.doc.data()['sun'],
          icon: data.payload.doc.data()['icon'],
          mainservice: data.payload.doc.data()['myService']
        }
      });
      this.loadMap();
    })
  }

  loadMap(){
    let options: GoogleMapOptions = {
      zoom: 13,
      controls: {
        'compass': false,
        'indoorPicker': true,
        'mapToolbar': true,
        'myLocation': true,
        'myLocationButton': true,
        'zoom': true,
      },
    }
    this.map = GoogleMaps.create('map_canvas', options);

    this.map.on(GoogleMapsEvent.MAP_READY).subscribe((success) => {

      //remove google maps labels and markers;
      let styles = {
        hide: [
          {
            featureType: 'poi.business',
            stylers: [{visibility: 'off'}]
          },
          {
            featureType: 'transit',
            elementType: 'labels.icon',
            stylers: [{visibility: 'off'}]
          }
        ]
      }
      this.map.setOptions({ styles: styles['hide']});
      this.checkGPSPermission();
    });
  }

[wf9a5m75]

Map is not a HTML element, it's a native view. It takes little time to prepare many things.

You can create a map without attaching map div, then involve map.setDiv()