Googleマップをイオン2アプリに統合できません

Question

私は自分のアプリにGoogleマップを入れようとしています。

GMapsプラグインが追加されました。

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="my android api" --variable API_KEY_FOR_IOS="my ios api" 

追加必要な依存関係。

npm install 

ただし、アプリケーションを実行しようとすると、このランタイムエラーが発生します。ここで

**Runtime Error** 
Uncaught (in promise): [object Object] 
**Stack** 
Error: Uncaught (in promise): [object Object] 
    at s (http://localhost:8100/build/polyfills.js:3:4211) 
    at s (http://localhost:8100/build/polyfills.js:3:4034) 
    at http://localhost:8100/build/polyfills.js:3:4574 
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9723) 
    at Object.onInvokeTask (http://localhost:8100/build/main.js:35879:37) 
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9659) 
    at e.runTask (http://localhost:8100/build/polyfills.js:3:7083) 
    at i (http://localhost:8100/build/polyfills.js:3:3671) 
    at HTMLAnchorElement.invoke (http://localhost:8100/build/polyfills.js:3:10876) 

typescriptですコードです：問題がどこにある

import {Component} from "@angular/core"; 
import { 
    GoogleMap, 
    GoogleMapsEvent, 
    GoogleMapsLatLng, 
    GoogleMapsMarker, 
    Geolocation 
} from 'ionic-native'; 


@Component({ 
    selector: 'page-about', 
    templateUrl: 'about.html' 
}) 
export class AboutPage { 
    private _latitude: number; 
    private _longitude: number; 

    constructor() {} 

    ngAfterViewInit() { 
    let map = new GoogleMap(document.getElementById('map')); 

    // when the map is ready 
    map.one(GoogleMapsEvent.MAP_READY).then(() => { 
     Geolocation.getCurrentPosition().then(pos => { 
     this._latitude = pos.coords.latitude; 
     this._longitude = pos.coords.longitude; 

     // move the camera 
     map.moveCamera({ 
      target: new GoogleMapsLatLng(this._latitude, this._longitude), 
      zoom: 18, 
      tilt: 30 
     }).then(() => { 

      // add a marker 
      map.addMarker({ 
      position: new GoogleMapsLatLng(this._latitude, this._longitude), 
      title: 'You are here!' 
      }) 

      // show marker info 
      .then((marker: GoogleMapsMarker) => { 
      marker.showInfoWindow(); 

      // listen to all available events 
      map.on(GoogleMapsEvent.MAP_CLICK).subscribe(
      () => { 
       alert('MAP_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.MAP_LONG_CLICK).subscribe(
      () => { 
       alert('MAP_LONG_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.MY_LOCATION_CHANGE).subscribe(
      () => { 
       alert('MY_LOCATION_CHANGE'); 
       }); 

      map.on(GoogleMapsEvent.MY_LOCATION_BUTTON_CLICK).subscribe(
      () => { 
       alert('MY_LOCATION_BUTTON_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.INDOOR_BUILDING_FOCUSED).subscribe(
      () => { 
       alert('INDOOR_BUILDING_FOCUSED'); 
       }); 

      map.on(GoogleMapsEvent.INDOOR_LEVEL_ACTIVATED).subscribe(
      () => { 
       alert('INDOOR_LEVEL_ACTIVATED'); 
       }); 

      map.on(GoogleMapsEvent.CAMERA_CHANGE).subscribe(
      () => { 
       alert('CAMERA_CHANGE'); 
       }); 

      map.on(GoogleMapsEvent.CAMERA_IDLE).subscribe(
      () => { 
       alert('CAMERA_IDLE'); 
       }); 

      map.on(GoogleMapsEvent.MAP_READY).subscribe(
      () => { 
       alert('MAP_READY'); 
       }); 

      map.on(GoogleMapsEvent.MAP_LOADED).subscribe(
      () => { 
       alert('MAP_LOADED'); 
       }); 

      map.on(GoogleMapsEvent.MAP_WILL_MOVE).subscribe(
      () => { 
       alert('MAP_WILL_MOVE'); 
       }); 

      map.on(GoogleMapsEvent.MAP_CLOSE).subscribe(
      () => { 
       alert('MAP_CLOSE'); 
       }); 

      map.on(GoogleMapsEvent.MARKER_CLICK).subscribe(
      () => { 
       alert('MARKER_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.OVERLAY_CLICK).subscribe(
      () => { 
       alert('OVERLAY_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.INFO_CLICK).subscribe(
      () => { 
       alert('INFO_CLICK'); 
       }); 

      map.on(GoogleMapsEvent.MARKER_DRAG).subscribe(
      () => { 
       alert('MARKER_DRAG'); 
       }); 

      map.on(GoogleMapsEvent.MARKER_DRAG_START).subscribe(
      () => { 
       alert('MARKER_DRAG_START'); 
       }); 

      map.on(GoogleMapsEvent.MARKER_DRAG_END).subscribe(
      () => { 
       alert('MARKER_DRAG_END'); 
       }); 

      }); 
     }); 
     }); 
    }); 
    } 
} 

は見つかりませんでした、依存関係やプラグインの問題のように思えます。

Answer 1

ionic用のGoogleマップSDKがブラウザで実行されないため、最初にビルドするか、エミュレータでアプリを実行する必要があります。

どちらか私はおよそチュートリアル見つけたionic run androidまたは
ビルドアプリionic build android