Google Map is showing as white screen in Ionic 3 application

I am using ionic-native/google-maps plugin for my Ionic 3. The google map was working before like below:

enter image description here

Suddenly, it starts to show white background but with the InfoWindow like below:

enter image description here

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?

At least you should try to update.

Ok. I will try updating and let you know the result. One query is where is the monthly 200 dollar credit for google maps. Will i get it later on at the end of month? I have got $300 free credit to get started with any GCP product.
image

@wf9a5m75, I have updated the packages like below:

In package.json:

 "dependencies": {
    "@ionic-native/google-maps": "^4.9.1",
    "cordova-plugin-googlemaps": "^2.3.8"
 },
 "cordova": {
         "cordova-plugin-googlemaps": {
        "API_KEY_FOR_ANDROID": "XXXXXXXXXXXXXXXXXXXXXXXX",
        "API_KEY_FOR_IOS": "XXXXXXXXXXXXXXXXXXXXXXX",
        "PLAY_SERVICES_VERSION": "15.0.1",
        "ANDROID_SUPPORT_V4_VERSION": "26.1.0"
      }
 }

In project.properties:

target=android-26
android.library.reference.1=CordovaLib
cordova.system.library.2=com.google.android.gms:play-services-auth:11.8.0
cordova.system.library.3=com.google.android.gms:play-services-identity:11.8.0
cordova.system.library.4=com.android.support:support-v4:24.1.1+
cordova.system.library.5=com.squareup.okhttp3:okhttp:3.+
cordova.system.library.6=com.google.android.gms:play-services-maps:15.0.1
cordova.system.library.7=com.google.android.gms:play-services-location:15.0.1
cordova.system.library.8=com.android.support:support-core-utils:26.1.0

But, still the map is not showing. I have added the code in the question.

Set dimensions (height and width) for the map. Lets say

<div #map id="map"></div>

there in  .scss file 
page-home {
#map {
    width: 100%;
    height: 100%;
  }
}

I hope it works.

@Ramsk, i have it in my scss file. Actually it was working before. You can see the HTMLInfowindows is there. But, the map is not showing only.

@wf9a5m75, I have included the same configuration in project.properties and build.gradle. But alas, white screen is there but with the marker. I have added the marker in the map. How is the marker is showing then?

Please share your project files on github.

The tabs are creating this issue. When i open the map from page-tabs in a modal, then the white screen comes. But, if the use setRoot to a page rather than opening a modal, the map works. Is there any tricks to overcome that if i open the map in modal from tabs page?

If you want to ask to help me, please share your project files on GitHub (or other git repos). Otherwise please ask to another people.

Am also suffering from same issue can you please help me out from this problem.

my maps working in chrome fine but in device showing white page.