Variable becomes undefined inside promise

Question

I'm working on an Ionic 3 app which uses Ionic Native Google Maps plugin. I'm trying to use node pool with the Google Maps instance to create a marker pool.

My problem is that inside the new Promise in the createPool function, this.map is undefined, even though it has been created by the loadMap() function. I read this awesome post about promises but I can't figure out how that applies to my case. I would be very grateful if anyone could help me.

ngAfterViewInit() {
    this.platform.ready()
      .then(_ => {
        return this.loadMap()
      })
      .then(_ => {
        this.markerpool = this.createPool();
        this.markerpool.on('factoryCreateError', err => console.log(err));
      })
} 


createPool() {
    var factory = {
      create: function () {
        return new Promise((resolve, reject) => {
          this.map.addMarker({
            icon: 'assets/icon/sun.png',
            visible: false
          })
            .then(marker => {
              // icon anchor set to the center of the icon
              marker.setIconAnchor(42, 37);
              resolve(marker);
            })
        })
      },
      destroy: function (marker: Marker) {
        return new Promise((resolve, reject) => {
          marker.remove();
          resolve();
        })
      }
    }
    var opts = {
      max: 60, // maximum size of the pool
      min: 20 // minimum size of the pool
    }
    return GenericPool.createPool(factory, opts);
  }

loadMap() {
    this.mapElement = document.getElementById('map');
    let mapOptions: GoogleMapOptions = {
      camera: {
        target: {
          lat: 40.9221968,
          lng: 14.7907662
        },
        zoom: maxzoom,
        tilt: 30
      },
      preferences: {
        zoom: {
          minZoom: minzoom,
          maxZoom: maxzoom
        }
      }
    };

    this.map = this.googleMaps.create(this.mapElement, mapOptions);
    this.zoomLevel = this.getZoomLevel(maxzoom);
    return this.map.one(GoogleMapsEvent.MAP_READY);
  }

Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Oct 31 '17 at 16:58

score 1 · Answer 1 · answered Oct 31 '17 at 14:59

1

The this inside new Promise is not the same as the outer this in which the map is loaded. You can declare a member variable inside factory which is assigned to the outer this, or to the outer map and use that inside the new Promise instead.

var factory = {
    outerthis: this, //or outermap:this.map
    create: ...
       ...
       this.outerthis.map.addMarker(... //or access this.outermap.addMarker directly

answered Oct 31 '17 at 14:59

Vasan

4,810
4
20
39

thank you so much, I'm so used to the fat arrow functions that I didn't notice it! – lpeppe Oct 31 '17 at 15:06

score 0 · Answer 2 · answered Oct 31 '17 at 16:59

0

If you had used an arrow function instead of create: function () {, the this inside the value would have been the object that createPool is called on (which has the map property), not the factory.

answered Oct 31 '17 at 16:59

Bergi

630,263
148
957
1,375

score 0 · Answer 3 · answered Oct 31 '17 at 22:48

Try to replace var with let. let keeps the variable scope of outside of function. Also you need to use ()=>{} instead of function()

let factory = {
  create: () => {
    return new Promise((resolve, reject) => {
      this.map.addMarker({
        icon: 'assets/icon/sun.png',
        visible: false
      })
      .then(marker => {
        // icon anchor set to the center of the icon
        marker.setIconAnchor(42, 37);
        resolve(marker);
      })
    })
  },
  destroy: (marker: Marker) => {
    return new Promise((resolve, reject) => {
      marker.remove();
      resolve();
    })
  }
}
let opts = {
  max: 60, // maximum size of the pool
  min: 20 // minimum size of the pool
}

Variable becomes undefined inside promise

3 Answers3