Working on an Angular2 / Ionic 2 mobile App, I am utilizing the google maps JS API to display markers on a map. Upon clicking a marker, an information window pops up containing text and a button that triggers a function when clicked. If this function simply logs data to the console, everything functions as expected.
However, I seem to be encountering a scope-related issue. When attempting to access any page function or call NavController to navigate to another page upon clicking the button, it fails.
addInfoWindow(marker, origContent){
let infoWindow = new google.maps.InfoWindow();
var content = document.createElement('div');
content.innerHTML = (origContent);
var button = content.appendChild(document.createElement('input'));
button.type = 'button';
button.id = 'showMoreButton';
button.value = 'show more';
google.maps.event.addDomListener(button, 'click', function () {
request();
// This successfully calls the "request()" method upon button click
});
google.maps.event.addListener(marker, 'click', () => {
infoWindow.setContent(content);
});
function request() {
this.navCtrl.push(RequestPage);
// However, this does not work due to scoping issues. I am unable to access my page's methods or components.
}
}
Any suggestions on how I can overcome this obstacle and gain access to NavController? I've tried various approaches, including NgZone, but with no success...