При попытке загрузить карту на устройство с помощью плагина ionic 2 Google Map Native отображается черный экран. ⇐ IOS

[Anonymous]

Примечание. Этот проект необходимо запустить на устройстве iOS или Android.

Справочная информация:
Я установил собственный плагин Google Maps в свой проект ionic 2 с помощью команды

Код: Выделить всё

$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

как показано по следующей ссылке: http://ionicframework.com/docs/v2/native/google-maps/

Затем я запустил команду $ ionic Platform add ios
а затем $ ionic build ios

До этого момента все идет как положено .
Когда я пытаюсь отобразить карту, вижу черный экран, не знаю, чего не хватает!

Код:

/src/app/app.module.ts

Код: Выделить всё

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

/src/app/app.comComponent.ts

Код: Выделить всё

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';

import {
GoogleMap,
GoogleMapsEvent,
GoogleMapsLatLng,
CameraPosition,
GoogleMapsMarkerOptions,
GoogleMapsMarker
// GoogleMapsMapTypeId
} from 'ionic-native';

@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage = HomePage;

constructor(platform: Platform) {
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();
Splashscreen.hide();

let map = new MapPage();
map.loadMap();
});
}
}

class MapPage {
constructor() {}

// Load map only after view is initialize
ngAfterViewInit() {
this.loadMap();
}

loadMap() {
// make sure to create following structure in your view.html file
// and add a height (for example 100%) to it, else the map won't be visible
// 
//
// 

// create a new map by passing HTMLElement
let element: HTMLElement = document.getElementById('map');

let map = new GoogleMap(element);

// create LatLng object
let ionic: GoogleMapsLatLng = new GoogleMapsLatLng(43.0741904,-89.3809802);

// create CameraPosition
let position: CameraPosition = {
target: ionic,
zoom: 18,
tilt: 30
};

// listen to MAP_READY event
map.one(GoogleMapsEvent.MAP_READY).then(() => {
// move the map's camera to position
map.moveCamera(position); // works on iOS and Android
});

// create new marker
let markerOptions: GoogleMapsMarkerOptions = {
position: ionic,
title: 'Ionic'
};

map.addMarker(markerOptions)
.then((marker: GoogleMapsMarker) => {
marker.showInfoWindow();
});
}
}

/src/pages/home/home.html

Код: Выделить всё

Ionic Blank

Кто-нибудь может помочь разобраться в проблеме. Мы очень ценим вашу помощь.

Ссылка на документацию

Ссылка на репозиторий проекта

Подробнее здесь: https://stackoverflow.com/questions/427 ... google-map