Currently, I am developing a cutting-edge Ionic 3 application that incorporates the sensational Ionic Native Google Maps plugin. As part of my project, I aim to implement a marker pool utilizing node pool.
The hiccup I am facing revolves around the new Promise inside the createPool function. Surprisingly, the 'this.map' attribute appears to be undefined within this context, despite being established by the loadMap() operation. In my quest for answers, I stumbled upon an enlightening post discussing promises, yet its relevance to my particular scenario eludes me. Any assistance in clarifying this matter would be immensely appreciated.
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);
}