this.map.getCenter() Cannot read property

@kumailrlakhani wrote:

Inside google.maps.event.addListener when trying to call alert(this.map.getCenter()); I am getting 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”,

Code:

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);
        console.log("getCenter(): " + this.map.getCenter());
        google.maps.event.addListener(new google.maps.Map(this.mapElement, mapOptions), 'idle', function () {
          alert(this.map.getCenter());
        });
        resolve(true);

        // //Add Marker
        // this.addMarker("<p><strong>This is your current position!</strong></p>");

      }, (err) => {
        console.log(err);
      });

    });

  }



  addMarker(Desc) {

    if (this.marker || this.marker != undefined)
      this.marker.setMap(null)

    this.marker = new google.maps.Marker({
      map: this.map,
      animation: google.maps.Animation.DROP,
      position: this.map.getCenter()
    });

    let content = Desc;
    let infoWindow = new google.maps.InfoWindow({
      content: content
    });
    infoWindow.open(this.map, this.marker);

    google.maps.event.addListener(this.marker, 'click', () => {
      infoWindow.open(this.map, this.marker);
    });

  }

  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();

    });

  }

}

Posts: 2

Participants: 2

Read full topic