I am using ionic-native/google-maps plugin for my Ionic 3. The google map was working before like below:
Suddenly, it starts to show white background but with the InfoWindow
like below:
I haven’t changed any code. I have recently added a billing account for this project in the google console.
In package.json:
"dependencies": {
"@ionic-native/google-maps": "4.7.0",
"cordova-plugin-googlemaps": "^2.2.9"
},
"cordova": {
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "XXXXXXXXXXXXXXXXXXXXXXXX",
"API_KEY_FOR_IOS": "XXXXXXXXXXXXXXXXXXXXXXX",
"PLAY_SERVICES_VERSION": "12.0.0",
"ANDROID_SUPPORT_V4_VERSION": "24.1.0"
}
}
In project.properties:
target=android-26
android.library.reference.1=CordovaLib
cordova.system.library.1=com.facebook.android:facebook-android-sdk:4.+
cordova.system.library.2=com.google.android.gms:play-services-auth:11.+
cordova.system.library.3=com.google.android.gms:play-services-identity:11.+
cordova.gradle.include.1=twitter-connect-plugin/offershare-twitter.gradle
cordova.system.library.4=com.google.android.gms:play-services-maps:11.+
cordova.system.library.5=com.google.android.gms:play-services-location:11.+
cordova.system.library.6=com.android.support:support-core-utils:24.1.0
cordova.system.library.7=com.android.support:support-v4:24.1.1+
cordova.system.library.8=com.squareup.okhttp3:okhttp:3.+
The code which was working before:
ionViewDidLoad() {
this.platform.ready().then(() => {
let element = this.mapElement.nativeElement;
let routePointBounds = new LatLngBounds(this.routePoints);
let mapOptions: GoogleMapOptions = {
camera: {
target: routePointBounds.getCenter(),
zoom: 20
},
controls: {
compass: true,
myLocationButton: true,
myLocation: true,
zoom: true,
mapToolbar: true
}
};
let restaurantMarkerOptions: MarkerOptions = {
icon: {
url: 'assets/imgs/logo.png',
size: {
width: 60,
height: 70
}
},
position: this.routePoints[this.routePoints.length - 1],
animation: GoogleMapsAnimation.BOUNCE
};
this.map = GoogleMaps.create(element, mapOptions);
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
this.map.addPolyline({
points: this.routePoints,
'color': '#ef0707',
'width': 3,
'geodesic': true
}).then((polyline) => {
this.map.animateCamera({
target: routePointBounds,
padding: 80
});
this.map.addMarker(restaurantMarkerOptions).then((marker: Marker) => {
this.makeDistanceInfoWindow().open(marker);
});
});
});
});
}
Am i missing any thing? Can anyone please point me out why the white screen is appearing suddenly?