I am working on an Ionic/Angular2 app where I have integrated a Google Map into the view. Within my code, I have an observable named markers
, which is essentially an array of Google Maps marker objects. These markers are pushed to the array to display them on the map, and event listeners are added to each marker. While the clicking functionality works fine, I notice that I lose access to this.markers
. I am wondering why this is happening and how I can create a plain variable that remains accessible throughout the class.
Below is a snippet of my code:
export class MapView
{
markers: any;
ngOnInit()
{
// Initialization for the map and raw marker array data not shown here
this.addListeners()
}
addListeners() // Function works properly (this.markers is accessible)
{
console.log(this.markers) // Displays the markers array correctly
for(var i = 0; i < this.markers.length; i++)
{
this.markers[i].addListener("click",this.markerClicked, this);
}
}
markerClicked(marker) // The clicked marker is passed as a parameter
{
console.log(this.markers);
// Here lies the issue. The console indicates that the markers array is empty when called from this function
}
}