未捕获的TypeError：具有Angular 2的Ionic 2

Question

我是网络技术世界的新手，我目前正在尝试使用Ionic 2和Angular 2的Geo项目。我遇到了一个问题，我无法继续下去，有人可以帮助我吗？

＆＃13;

＆＃13;

import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
import { ActionPage } from '../action/action';
import { CharacterPage } from '../character/character';
import { GoogleMaps } from '../../providers/google-maps';
import {
    GoogleMap,
    GoogleMapsEvent,
    GoogleMapsLatLng,
    CameraPosition,
    GoogleMapsMarkerOptions,
    GoogleMapsMarker
} from 'ionic-native';
import { ConnectivityService } from '../../providers/connectivity-service';

declare var google;

@Component({
    selector: 'home-page',
    templateUrl: 'map.html'
})
export class MapPage {

    actionPage = ActionPage;
    characterPage = CharacterPage;

    @ViewChild('map') mapElement: ElementRef;

    map: any;
    mapInitialised: boolean = false;
    apiKey: any;


    constructor(public nav: NavController, public connectivityService: ConnectivityService) {
        this.loadGoogleMaps();
    }

    loadGoogleMaps() {

        this.addConnectivityListeners();

        if (typeof google == "undefined" || typeof google.maps == "undefined") {

            console.log("Google maps JavaScript needs to be loaded.");
            this.disableMap();

            if (this.connectivityService.isOnline()) {
                console.log("online, loading map");

                //Load the SDK
                window['mapInit'] = () => {
                    this.initMap();
                    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';
                } else {
                    script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
                }

                document.body.appendChild(script);

            }
        }
        else {

            if (this.connectivityService.isOnline()) {
                console.log("showing map");
                this.initMap();
                this.enableMap();
            }
            else {
                console.log("disabling map");
                this.disableMap();
            }

        }

    }
    disableMap() {
        console.log("disable map");
    }

    enableMap() {
        console.log("enable map");
    }

    addConnectivityListeners() {

        let onOnline = () => {

            setTimeout(() => {
                if (typeof google == "undefined" || typeof google.maps == "undefined") {

                    this.loadGoogleMaps();

                } else {

                    if (!this.mapInitialised) {
                        this.initMap();
                    }

                    this.enableMap();
                }
            }, 2000);

        };

        let onOffline = () => {
            this.disableMap();
        };

        document.addEventListener('online', onOnline, false);
        document.addEventListener('offline', onOffline, false);

    }
    initMap() {

        this.mapInitialised = true;

        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
            }

            this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
            this.searchPlaces();
        });

    }
    searchPlaces() {
        var service = new google.maps.places.PlacesService(this.map);
        service.nearbySearch({
            location: { lat: -33.867, lng: 151.195 },
            radius: 1000,
            types: ['store']
        }, this.callback);
    }


    callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
            for (var i = 0; i < results.length; i++) {
                var marker = new google.maps.Marker({
                    map: this.map,
                    position: results[i].geometry.location,
                });
            }
        }
    }
}

＆＃13;

＆＃13;

＆＃13;

这是通过Ionic服务输出的错误

＆＃13;

＆＃13;

Runtime Error
Cannot read property 'map' of undefined
Stack
TypeError: Cannot read property 'map' of undefined
    at MapPage.callback (http://localhost:8100/build/main.js:57878:30)
    at Z5._.k.Ie (https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/places_impl.js:34:482)
    at https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/places_impl.js:16:196
    at Nm.<anonymous> (https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/places_impl.js:8:218)
    at https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/common.js:53:98
    at https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/common.js:37:136
    at https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/common.js:53:1
    at Nm.Zm (https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/common.js:187:171)
    at Object.c [as _likrno] (https://maps.googleapis.com/maps-api-v3/api/js/28/1/intl/de_ALL/common.js:47:404)
    at https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A8100%2F%3Fionicplatform%3Dios%26ionicstatusbarpadding%3Dtrue&4sAIzaSyBTfuWu9pAZ10TrFVeECoFcWVyydVyP4wM&callback=_xdc_._likrno&token=63548:1:28
Ionic Framework: 2.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 7.5.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

＆＃13;

＆＃13;

＆＃13;