I’ cant show Google Map on iOS.
App is crashed when GoogleMaps create.
Have you hit on any possible causes of the problem?
My Ionic conditions
cli packages: (/usr/local/var/nodebrew/node/v8.5.0/lib/node_modules)
@ionic/cli-utils : 1.19.1
ionic (Ionic CLI) : 3.19.1
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 3.1.7
Cordova Platforms : ios 4.4.0
Ionic Framework : ionic-angular 3.3.0
System:
ios-deploy : 1.9.2
ios-sim : 5.1.0
Node : v8.5.0
npm : 5.3.0
OS : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
"dependencies": {
"@angular/common": "4.1.2",
"@angular/compiler": "4.1.2",
"@angular/compiler-cli": "4.1.2",
"@angular/core": "4.1.2",
"@angular/forms": "4.1.2",
"@angular/http": "4.1.2",
"@angular/platform-browser": "4.1.2",
"@angular/platform-browser-dynamic": "4.1.2",
"@ionic-native/camera": "^3.12.1",
"@ionic-native/core": "4.5.2",
"@ionic-native/crop": "^4.4.2",
"@ionic-native/facebook": "^4.2.1",
"@ionic-native/file": "^3.12.1",
"@ionic-native/google-maps": "^4.5.2",
"@ionic-native/image-picker": "^3.12.1",
"@ionic-native/keyboard": "^4.4.2",
"@ionic-native/splash-screen": "3.10.2",
"@ionic-native/status-bar": "3.10.2",
"@types/lodash": "^4.14.85",
"@types/moment": "^2.13.0",
"@types/moment-timezone": "^0.5.1",
"@types/uuid": "^3.4.2",
"angularfire2": "^5.0.0-rc.3",
"com.synconset.imagepicker": "https://github.com/Telerik-Verified-Plugins/ImagePicker",
"cordova-ios": "4.4.0",
"cordova-plugin-camera": "~2.4.1",
"cordova-plugin-console": "1.0.5",
"cordova-plugin-crop": "^0.4.0",
"cordova-plugin-device": "1.1.4",
"cordova-plugin-facebook4": "~1.9.1",
"cordova-plugin-file": "~4.3.3",
"cordova-plugin-googlemaps": "^2.1.1",
"cordova-plugin-googlemaps-sdk": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps-sdk.git",
"cordova-plugin-ios-localized-strings": "^1.0.5",
"cordova-plugin-splashscreen": "~4.0.1",
"cordova-plugin-statusbar": "git+https://github.com/apache/cordova-plugin-statusbar.git",
"cordova-plugin-telerik-imagepicker": "https://github.com/Telerik-Verified-Plugins/ImagePicker",
"cordova-plugin-whitelist": "1.3.1",
"dotenv": "^4.0.0",
"firebase": "^4.6.0",
"ionic-angular": "3.3.0",
"ionic-plugin-keyboard": "~2.2.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.11"
},
map.ts
import { GoogleMaps, GoogleMap, GoogleMapsEvent, GoogleMapOptions, CameraPosition, MarkerOptions, Marker } from '@ionic-native/google-maps';
import { Component } from "@angular/core/";
@Component({
selector: 'map',
templateUrl: 'map.html'
})
export class MapPage {
map: GoogleMap;
constructor() { }
ionViewDidLoad() {
this.loadMap();
}
loadMap() {
this.map = GoogleMaps.create('map_canvas');
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
});
}
}
map.html
<ion-content>
<div id="map_canvas" style="height: 100%;"></div>
</ion-content>
And google map api is valid status. in my google api developers console.