Whre should loadlocation function placed?


#1

hi guys.
in this code I try to get get Lat and Lang of location from Json file to feed initializeMap() but everyehre i placed this function initializeMap() was loaded early.
and LLat and LLan were get value later. there fore map was not loaded.

import 'rxjs';
import { Http, Response } from '@angular/http';
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform,NavController } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
 
declare var google;
 
@Component({
  selector: 'page-map',
  templateUrl: 'map.html'
})
export class MapPage {
 
  @ViewChild('map') mapElement: ElementRef;
  map: google.maps.Map;
  locimg= 'ion-ios-location'; 
  public locate:any;
  public LLat;
  public LLan;

  constructor( public nav: NavController, private platform: Platform,private  http: Http) {   
  this.map = null;   
  this.platform.ready().then(() => {
  this.initializeMap();
  });
}

loadlocation(){
      this.locate=this.http.get('cablocation.json')
    .map(res => res.json())
    .subscribe(locate =>{    
    this.locate = locate.items;
    this.LLat=this.locate[0].location_lat;
    this.Lang=this.locate[0].location_lan;               
    console.log(this.LLat,'lat');
    console.log(this.LLan,'lang');  
    });  
}
initializeMap() {
this.loadlocation();
console.log('initializeMap');
let minZoomLevel = 3;
this.map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(this.LLat,this.LLan),
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
} 

addMarker(){
   let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: this.map.getCenter()
  }); 
  let content = "<h4>some info!!!</h4>";          
 
  this.addInfoWindow(marker, content);
}
addInfoWindow(marker, content){
 
  let infoWindow = new google.maps.InfoWindow({
    content: content
  }); 
  google.maps.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker);
  });
}
}

#2

Did You tried function code on constructor functions?


#3

This isn’t really a question of where to place the function as much as it is how to structure asynchronous code. One way you can break things down is:

  1. functions that just do a job, and nobody outside the function cares when it finishes
  2. functions that get data and make it available to consumers in the future

Your loadLocation() function is written as if it was a type 1, but you’re using it as a type 2. Type 1 functions should always return void, and type 2 functions must return a future of some sort (Promise or Observable). Callers of type 2 functions must only access the returned data after the future resolves (inside a then or subscribe block chained off the future-returning function’s return value).

So either refactor loadLocation to include all the other work that is dependent on having the location, or make it return the underlying Observable and rewrite its caller to subscribe to it (and only in that subscription attempt to rely on the location).


#4

Dear @rapropos thank you for your guiding, I used this structure but it is not working for me. I used __zone_symbol__value but it is not working.

@ViewChild('map') mapElement: ElementRef;
  map: google.maps.Map;
  locimg= 'ion-ios-location'; 
  private locate:any;
  private loc;
  public LLat;
  public Lang;

  constructor( public nav: NavController, private platform: Platform,private  http: Http) {   
  this.map = null;   
  this.platform.ready().then(() => {
  this.loc=this.loadlocation();
console.log(this.loc);
//this.initializeMap();
this.LLat=this.loc.location_lat;
this.Lang=this.loc.location_lan;
console.log(this.LLat,'lat');
console.log(this.Lang,'lang');  
  });
}

loadlocation(){
     return new Promise(resolve => {
      this.http.get('http://80.75.3.205:8080/.../location/all')
      .map(res => res.json())
      .subscribe(locate =>{    
      this.locate = locate.items[0];
      resolve(this.locate);
    });
    }) 
}