0

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));
              }
            });
  }
Andrew
  • 619
  • 1
  • 7
  • 10
  • Why would you try to call it like `this.goShopPage()`? Since I don't see any explicit binding, how do you know `this` is pointed to the global scope? Why not just call `goShopPage()`? – gforce301 Jun 13 '18 at 22:54
  • I can't find `goMerchant()` in your code. – AndrewL64 Jun 13 '18 at 22:55
  • I've adjusted the error message correctly - thanks. – Andrew Jun 14 '18 at 00:17
  • I attempted to call goShopPage(); vs this.goShopPage() as stated however it still throws an error: polyfills.js:3 Uncaught ReferenceError: goShopPage is not defined – Andrew Jun 14 '18 at 00:19
  • So if you console.log(this) just before calling your method what is the response? – Sergey Rudenko Jun 14 '18 at 05:12
  • 1
    Did you try to use fat arrow function instead of that: ...function(marker,i) {...}. Try (marker,i) => {...} – Sergey Rudenko Jun 14 '18 at 05:14
  • @SergeyRudenko yup that was it. Using the fat arrow did the trick. I'm able to correctly call the function and navigate to another page. Thank you bro! – Andrew Jun 14 '18 at 06:49

0 Answers0