-1

So i am trying to add markers to my Map using data provided from firebase and i get the above error. I checked the other threads but found no solution for my problem. Some suggested it is broken package from package.json or due to the asynchronous code of firebase. I am pasting my code below. Please dont mind the places where i put async and await i was trying to synchronize the code to see if it is the issue.

export class LocMapPage {

  @ViewChild('map') mapElement: ElementRef;

  public map: any;
  coords: any;

  constructor(public navCtrl: NavController, public afd: AngularFireDatabase) {

  }

  ionViewDidLoad(){
      this.loadMap();
  }

  async loadMap(){

    try{

      let latLng = new google.maps.LatLng(39.361798, 22.941316);

      let mapOptions = {

        center: latLng,
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

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


      var MarkersRef = await firebase.database().ref("/HyperCategories/hyperCats/Locations/Mountain/Mountains/M1/");

    }catch(error){
      console.error(error);
    }

    MarkersRef.orderByChild("coords").on("child_added", function(data) {

        let lat = data.val().latitude;
        let lon = data.val().longitude;

        let myLatLng = {lat: lat, lng: lon};

        let marker = new google.maps.Marker({

          map: this.map,
          animation: google.maps.Animation.DROP,
          position: myLatLng

        });

        console.log(myLatLng);

    });

  }
}
UOT
  • 13
  • 5
  • You are losing the `this` context. Change `function(data) {` to `(data) => {`. – Matt McCutchen Aug 25 '18 at 00:58
  • Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) – Matt McCutchen Aug 25 '18 at 00:58

1 Answers1

0

In Javascript, async function will return a promise, which will be accessed in the calling function using '.then'.

ionViewDidLoad(){
   this.loadMap().then(()=>{
      //success
   });
}
Suresh Kumar Ariya
  • 9,516
  • 1
  • 18
  • 27