Я пытаюсь использовать карту Google в своем приложении Ionic2, как описано здесь, однако в строке 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>
Мой СКСС:
#map_canvas {
width: 100%;
height: 100%;
}
Что именно здесь происходит не так?
ОБНОВЛЕНИЕ: полный скриншот консоли
ОБНОВЛЕНИЕ:
typings install dt~google.maps --global должен выполняться в каталоге проекта, иначе он не действует!
