0

hereで説明されているように、Ionic2 アプリケーションで Google マップを使用しようとしていますが、次のように行にエラーがあるnew google.maps.Mapため、ページにマップが表示されないと思います。

ここに画像の説明を入力

ここに画像の説明を入力

私のapp.ts

import { Component, ViewChild, provide } from '@angular/core';
import { App, ionicBootstrap, Platform, Nav, Config } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import {AuthHttp, AuthConfig} from 'angular2-jwt';

import { StartPage } from './pages/start/start.component';
import { FarmList } from './pages/farmList/farmList.component';
import { Slider } from './pages/slider/slider.component';
import { ProfilePage } from './pages/profile/profile.component';

@Component({
  templateUrl: 'build/app.html',
  styleUrls: ['/app.scss'],
  providers:[
    provide(AuthHttp, {
      useFactory: (http) => {
        return new AuthHttp(new AuthConfig, http);
      },
      deps: [Http]
    })
  ]
})


export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Slider;

  pages: Array<{title: string, component: any, name: any}>

  constructor(private platform: Platform) {
    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [

      { title: 'Start', component: StartPage , name:'home' },
      { title: 'Farms', component: FarmList, name: 'list' },
      { title: 'Profile', component: ProfilePage, name: 'contact' },
    ];

  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

ionicBootstrap(MyApp,[HTTP_PROVIDERS]);

私のindex.html：

<body>

  <ion-app></ion-app>

  <script src="http://maps.google.com/maps/api/js"></script>
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <!-- Polyfill needed for platforms without Promise and Collection support -->
  <script src="build/js/es6-shim.min.js"></script>
  <!-- Zone.js and Reflect-metadata  -->
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/zone.js"></script>
  <!-- the bundle which is built from the app's source code -->
  <script src="build/js/app.bundle.js"></script>
</body>

私のコンポーネント:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/start/start.html'
})

export class StartPage {

    map:any

  constructor( private navController: NavController, private platform: Platform) {

    this.initializeMap();
  }

   initializeMap() {

        this.platform.ready().then(() => {
            var minZoomLevel = 12;

            this.map = new google.maps.Map(document.getElementById('map_canvas'), {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(38.50, -90.50),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

        });
    }   
}

私のHTML：

<ion-navbar *navbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title>Start</ion-title>
</ion-navbar>


<ion-content padding class="page1">

    <div padding>
        <img src="images/icon_transperent.png" width="200"/>
    </div>

    <div id="map_canvas"></div> 

</ion-content>

私の SCSS:

#map_canvas {
    width: 100%;
    height: 100%;
}

ここで何がうまくいかないのですか？

更新: 完全なコンソールのスクリーンショット

ここに画像の説明を入力

アップデート：

typings install dt~google.maps --globalプロジェクト ディレクトリで実行する必要があります。それ以外の場合は効果がありません。

4

1 に答える 1