Google Map is showing as white screen in Ionic 3 application


#1

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?


#2

At least you should try to update.


#3

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


#4

@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.


#5

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.


#6

@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.


#7

#8

@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?


#9

Please share your project files on github.


#10

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?


#11

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.