Promise and google map

Ionic Framework ionic-v3
1

I need to show the google map for each item page, and i got a provider “fetchdata.ts”

fetchdata.ts

  post={};
  getPostDetail(id){

    let link = 'http://xxxxx/apps/data2.php?action=get_posts&id='+id;

    console.log(link);

    this.http.get(link).map(res => res.json()).subscribe(data => {
        this.post=data;
       console.log(this.post['LAT'];
    });
          return Promise.resolve(this.post);
  }

in the item.ts.

constructor(public navCtrl: NavController, public navParams: NavParams, private fetchdata:Fetchdata) {

  this.id= this.navParams.get("id");
  fetchdata.getPostDetail(this.id).then(data => {
        this.loadMap(data);
       console.log(data['LAT'];
         
    });
}
  loadMap(data){

   console.log(data['LAT'];
    let element: HTMLElement = document.getElementById('map');
    let latLng = new google.maps.LatLng(data['LAT'],data['LON']);
    let mapOptions = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      draggable: false,
      clickable: false,
      editable: false,
      zoomControl:false
    }

    this.map = new google.maps.Map(element, mapOptions);

    var marker = new google.maps.Marker({
        position: latLng,
        title:"Here"
    });

    marker.setMap(this.map);

  }

this item.html

<div #map id="map"></div>

I only can get the right LAT from fetchdata.ts, i used promise already, but it’s not working, please help.