this.map.getCenter() Cannot read property

Question

I have created a provider for google map Refrence: https://www.joshmorony.com/location-select-page-with-google-maps-and-ionic/

Inside google.maps.event.addListener when trying to call alert(this.map.getCenter());

I am getting below error:

main.js:564
TypeError: Cannot read property 'getCenter' of undefined main.js:569
at Qg. (file:///android_asset/www/build/main.js:569:36)
at trigger (http://maps.google.com/maps/api/js?key=MY_API_KEY&callback=mapInit&libraries=places:123:449)
at http://maps.google.com/maps-api-v3/api/js/31/7/common.js:8:135
at _.Vo.H (http://maps.google.com/maps-api-v3/api/js/31/7/common.js:200:2336)
at t.invokeTask (file:///android_asset/www/build/polyfills.js:3:15660)

Versions:
"@angular/common": “5.0.0”,
"@ionic-native/core": “4.3.2”

import { Injectable } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Connectivity } from './wifi-connectivity-service';
import { Geolocation } from '@ionic-native/geolocation';

declare var window: any;

@Injectable()
export class GoogleMapsProvider {

  mapElement: any;
  pleaseConnect: any;
  map: any;
  mapInitialised: boolean = false;
  mapLoaded: any;
  mapLoadedObserver: any;
  currentMarker: any;
  apiKey: string = "MY_API_KEY";
  marker: any = null;

  constructor(
    public connectivityService: Connectivity,
    public geolocation: Geolocation
  ) {
  }

  init(mapElement: any, pleaseConnect: any): Promise<any> {

    this.mapElement = mapElement;
    this.pleaseConnect = pleaseConnect;
    return this.loadGoogleMaps();

  }

  loadGoogleMaps(): Promise<any> {
    return new Promise((resolve) => {
      if (typeof google == "undefined" || typeof google.maps == "undefined") {

        this.disableMap();
        if (this.connectivityService.isOnline()) {

          window['mapInit'] = () => {
            this.initMap().then(() => {
              resolve(true);
            });
            this.enableMap();
          }

          let script = document.createElement("script");
          script.id = "googleMaps";

          if (this.apiKey) {
            script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit&libraries=places';
          } else {
            script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
          }

          document.body.appendChild(script);

        }
      } else {

        if (this.connectivityService.isOnline()) {
          this.initMap();
          this.enableMap();
        }
        else {
          this.disableMap();
        }
        resolve(true);
      }

      this.addConnectivityListeners();

    });

  }

  initMap(): Promise<any> {

    this.mapInitialised = true;

    return new Promise((resolve) => {

      this.geolocation.getCurrentPosition().then((position) => {

        let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

        let mapOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          disableDefaultUI: true
        }

        this.map = new google.maps.Map(this.mapElement, mapOptions);
        //HERE I AM GETTING DATA:
        console.log("getCenter(): " + this.map.getCenter());
        google.maps.event.addListener(this.map, 'center_changed', function () {
          //HERE I AM GETTING ABOVE MENTIONED ERROR:
          alert(this.map.getCenter());
        });
        resolve(true);
      }, (err) => {
        console.log(err);
      });

    });

  }

  disableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "block";
    }

  }

  enableMap(): void {

    if (this.pleaseConnect) {
      this.pleaseConnect.style.display = "none";
    }

  }

  addConnectivityListeners(): void {

    this.connectivityService.watchOnline().subscribe(() => {

      setTimeout(() => {

        if (typeof google == "undefined" || typeof google.maps == "undefined") {
          this.loadGoogleMaps();
        }
        else {
          if (!this.mapInitialised) {
            this.initMap();
          }

          this.enableMap();
        }

      }, 2000);

    });

    this.connectivityService.watchOffline().subscribe(() => {

      this.disableMap();

    });

  }

}

Possible duplicate of [When should I use Arrow functions in ECMAScript 6?](https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6) — Suraj Rao, Jan 25 '18 at 05:08

score 2 · Accepted Answer · answered Jan 25 '18 at 06:32

Change this :

google.maps.event.addListener(this.map, 'center_changed', function () {
    //HERE I AM GETTING ABOVE MENTIONED ERROR:
    alert(this.map.getCenter());
});

to

google.maps.event.addListener(this.map, 'center_changed', () => {
    //HERE I AM GETTING ABOVE MENTIONED ERROR:
    alert(this.map.getCenter());
});

@Suraj Rao , suggested issue is scope , you better know when to use arrow function and when not , Coz of the function(){} you were not getting the scope of parent inside it , if you wan that you should use () => {}

this.map.getCenter() Cannot read property

1 Answers1