I have a "nearby" screen that lists locations and sorts them by closest distance to the user's location (obtained from geolocation). I've also created a map that uses map markers to display the locations (Google JavaScript API). This is using Ionic 3.
I cannot figure out how to access the "goShopPage()" function from the Google's InfoWindow. I can get the info window to open, and successfully click the info window to execute the console.log function, or any other function within that block.
However when I try to access the goShopPage() function using this.goShopPage, I get this error:
"Uncaught TypeError: this.goShopPage is not a function"
I've tried wrapping it in a dummy variable, and a bunch of other ways with no luck.
I've been working on this for a whole day now. Any help with this would be greatly appreciated!
export class GmapComponent implements OnInit{
@ViewChild ('map') mapElement;
map: any;
stores: any;
infoWindows: any;
constructor( public geolocation: Geolocation, private alertCtrl: AlertController, public navCtrl: NavController, public restProvider: RestProvider) {
this.infoWindows = [];
}
ngOnInit() {
this.loadMap();
}
goShopPage() {
console.log("Info Window Button Clicked");
}
//Loads map on the screen
loadMap() {
let i: any;
let locations: any = [];
this.geolocation.getCurrentPosition().then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
console.log("Coordinates", latLng);
const mapOptions: google.maps.MapOptions = {
center: latLng,
zoom: 17,
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
//Load data from REST API
this.restProvider.getStores().then(data => {
locations = data;
for (i = 0; i < locations.length; i++) {
const marker: google.maps.Marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].longi),
map: this.map,
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
let windowContent = `
<div id="content">
<h6 id="firstHeading" class="firstHeading">` + locations[i].name + `</h6>
<p id="tap">Open Page</p>
</div>`;
let infoWindow = new google.maps.InfoWindow({
content: windowContent
});
google.maps.event.addListenerOnce(infoWindow, 'domready', () => {
document.getElementById('tap').addEventListener('click', () => {
console.log("InfoWindow Clicked");
this.goShopPage();
});
});
return function() {
infoWindow.open(this.map, marker);
}
})(marker, i));
}
});
}