Cordova-plugin-googlemaps blank screen on Play store

[Remrem84]

My Ionic app is using the cordova-plugin-googlemaps 1.3.9 plugin, and everything had been working on iOS and Android until yesterday.

Cordova android: 5.1.1

Cordova ios: 4.1.1

Cordova CLI: 6.2.0

Ionic Framework Version: 1.2.1-nightly-1867

Ionic CLI Version: 2.0.0

Yesterday, I pushed a new version on the stores and now I’ve got a blank screen instead of the Google map. The map works on debug mode on my Android phone but not in production mode, I mean from the Play store.

Further to several researches, I have deduced that the problem came from Google Maps Android API v2 key. Thus, I have generated a new key and reinstalled the cordova plugin with the same command but with the new key :

ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="MY_NEW_API_KEY" --variable API_KEY_FOR_IOS="myIosKey"

After that, the map was not working even on debug mode… Therefore, I added the fingerprint of the debug.keystore in the google developer console. After this the map started to work again on debug mode

I did the same operation for the production version, using the fingerprint of the release keystore, used to build the production APK.

Despite this, I still have a blank screen instead of the map, when I download the app from the Play store.

It’s been two days that I’m stuck… I really need your help as soon as possible as it is very urgent …

I hope it’s clear.

Thanks in advance !

Best regards, Remrem.

[wf9a5m75]

Use the master branch version

[Remrem84]

Hello,

I tried with the master branch version :

cordova plugin add https://github.com/phonegap-googlemaps-plugin/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"

It does not work...By the way, is that the right way to install the last version plugin? (I am asking that because the plugin version is 1.3.9 in master, but the doc is speaking about a 1.4+ version...)

If you have another idea...I am desperate.

[wf9a5m75]

There are several reasons of the blank map. https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/TroubleShooting:-Blank-Map https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Changing-to-Google-Maps-release-key

Please inspect by yourself.

[Remrem84]

Hello,

thank you for your help. So this is what I tried :

1. Do you use Android emulator? Nope, the map is working on debug mode on my real device, but does not work on playstore.

2. Did you turn on the switches? yes.

3. Is your API key correct? To be honest, I lost my release keystore. BUT fortunately, I had uploaded my .keystore on Ionic. So I use the ionic platform to build my signed APK and push updates on Playstore. To retrieve the release keystore fingerprint, I tried to upload a new version of my apk with another keystore. The upload failed and I the message gave me my fingerprint !

4. Have you registered your package name with the above sign correctly? Yes.

5. Using OnsenUI 1/2? No

Changing to Google Maps release key I check my manifest file, and it is the right key

I am desperate...I forgot to mention my Javascript console in debug : util.js:206 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

To resume, the map works in debug mode (iOS and Android) and works on App Store but does not work on Play Store...

Any Idea ?

Thanks a lot.

[wf9a5m75]

This plugin DOES NOT use the Google Maps javascript API v3 at all, but the error message comes from the JS api.

[wf9a5m75]

Ionic users face the similar issue many times. Check it out the below comments:

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1107#issuecomment-249246130

https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/1007#issuecomment-231558103

[wf9a5m75]

And try the master branch version.

ionic plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="(your key)" --variable API_KEY_FOR_IOS="(your key)"

[Remrem84]

Hello, thanks for your help. This is what I tried :

• I changed ionic 1.2.1 to ionic 1.3.1
• I did that trick
• I removed all the stuffs in the code. Now I just try to init the map, it does not work...

As a reminder, the maps perfectly works in debug, but does not work in production (only android).

my map.controller.js :

class MapCtrl {

    /**
     * @ngInject
     */
    constructor($scope, $sessionStorage, $rootScope, DataLoader, BackandDatabase, $ionicPopup, $translate, $q, $timeout, DateService, $ionicLoading) {

        this.$rootScope = $rootScope;

        var _this = this;

        if(typeof _this.$rootScope.backdropMapDivHided === "undefined") {
            console.log("typeof _this.$rootScope.backdropMapDivHided === 'undefined'");
            var backdrop = document.getElementsByClassName('backdrop')[0];
            backdrop.parentNode.removeChild(backdrop);
            _this.$rootScope.backdropMapDivHided = true;
        }

        this.$q = $q;

        //MapService.setScope($scope);

        this.rally = $scope.rally = $sessionStorage.getObject("currentRally");

        this.$scope = $scope;
        this.$translate = $translate;
        this.ionicPopup = $ionicPopup;
        this.lsParams = {};
        this.lsParams.type = "persistent";
        this.lsParams.rally_date_end = this.rally.date_end;

        var mapDiv = document.getElementById("map_canvas");

        var map = plugin.google.maps.Map.getMap(mapDiv);

        if(!map) {

        } else {

            map.on(plugin.google.maps.event.MAP_READY, function() {
                 window.alert("plugin.google.maps.event.MAP_READY");
                //deferred.resolve(map);
            }, function(error) {
                  window.alert("MAP_READY event not fired, error :  ");
                  window.alert(error);
                //deferred.reject("MAP_READY event not fired. " + error);
            });
        }

        $scope.select = function(item) {
            $scope.selected = item;

            $timeout(function(){
                _this.loadSelectedStage();
            }, 0);
        };

        $scope.isSelected = function(item) {
            return $scope.selected.id === item.id;
        };

        $scope.selectedDates;

        this.prepareStages = function(stages){
            var days = [];
            if (stages === "undefined") {
                stages = {};
            }
            stages.forEach(function(stage){
                var day = new Date(stage.date).getUTCDay();
                if(!_.contains(days, day)){
                    days.push(day);
                    stage.visible = true;
                } else {
                    stage.visible = false;
                }
                if(!stage.checked){
                    stage.checked = false;
                }
            });
        };

        $scope.showHelp = function() {
            _this.map.setClickable(false);
            $ionicPopup.alert({
                title: _this.$translate.instant('SHOWHELP_TITLE'),
                templateUrl: "components/map/helpMap.html",
                scope: $scope,
                buttons: [
                    {
                        text: "<b>" + _this.$translate.instant('CLOSE') + "</b>",
                        type: "button-positive",
                        onTap: function () {

                        }
                    }
                ]
            }).then(function () {
                _this.map.setClickable(true);
            });
        }
    }
}

And my map.html :

<ion-view>
    <ion-nav-title>{{ 'MAP' | translate}} {{month | translate}} {{year | translate}}</ion-nav-title>

    <ion-nav-buttons side="right">
        <dataloader-spinner></dataloader-spinner>
    </ion-nav-buttons>

    <ion-content class="the-map" scroll="false">

        <div class="card" ng-if="stages && (stages.length < 1)">
            <div class="item item-text-wrap unavailable unavailableHeader row">
                <div class="col-center headerCard"><img src="images/logo_512.png"></div>
                <div class="col-center"><h2>{{ 'TEAM_NAME' | translate}}</h2></div>
            </div>
            <div class="item item-body unavailableBody">
                <p>{{ 'MAP_NOT_AVAILABLE' | translate}}</p>
            </div>
        </div>

        <div class="daySelection rs-circle-map" ng-if="stages && (stages.length > 0)">
            <ul>
                <li ng-repeat="stage in stages" ng-if="stage.visible"
                    ng-class="{'active' : isSelected(stage)}" on-touch="select(stage)">
                    {{ stage.date | date:'dd' }}
                </li>
            </ul>
            <ul class="question-mark">
                <li on-touch="showHelp()">?</li>
            </ul>
        </div>

        <div id="map_canvas" data-tap-disabled="true">
        </div>

    </ion-content>

</ion-view>```

I am desperate...

Do you have any idea ?

Thanks a lot guys.

[wf9a5m75]

Let me clear your problem.

1) Do you see the Google's logo? --> If yes, the problem is related with your key.

2) Did you try map.showDialog()? --> If yes, the problem is related with your code (JS or HTML)

3) Please post all log output (use Logcat).

[Remrem84]

1) No I don't see the Google's logo.

2) I tried something in production :

window.alert("before getMap"); var map = plugin.google.maps.Map.getMap("map_canvas"); window.alert("after getMap");

And I was not able to see the second alert...So I don't think showDialog() is gonna work, but I will try.

Okay will use Logcat and post log here.

Thank you.

[Remrem84]

This is my logCat : logcat.txt

I hope it will help. Thanks a lot.

[wf9a5m75]

Regarding of your log cat,

09-28 02:33:34.199 com.codonuts.securally(31665) - I chromium:  [INFO:CONSOLE(150)] "ERROR:ReferenceError: plugin is not defined", source: file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889 (150)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:  [INFO:CONSOLE(150)] "ReferenceError: plugin is not defined
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at innerInitMap (file:///android_asset/www/js/main.js?ionicCachebuster=37889:15:28663)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at MapService.value (file:///android_asset/www/js/main.js?ionicCachebuster=37889:15:29034)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at file:///android_asset/www/js/main.js?ionicCachebuster=37889:15:25419
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:162:305
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at m.$eval (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:176:467)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at m.$digest (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:174:47)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at m.$apply (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:177:249)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at g (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:129:444)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at x (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:134:50)
09-28 02:33:34.206 com.codonuts.securally(31665) - I chromium:      at XMLHttpRequest.v.onload (file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889:135:78)", source: file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js?ionicCachebuster=37889 (150)
0

Your app does not load the google maps plugin at all.

I don't know how did you install this plugin, but I guess you installed from npm.

Try install like this:

cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="MY_ANDROID_KEY" --variable API_KEY_FOR_IOS="MY_IOS_KEY"

[Remrem84]

Hello,

indeed the plugin was not installed in production...Thank you very much for your help.

For the record, I used ionic to build my APK, and the command did not add the plugin to the APK, I don't know why...

So I installed the plugin with the -- save option : cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="MY_ANDROID_KEY" --variable API_KEY_FOR_IOS="MY_IOS_KEY" --save

After that the plugin was correctly added to the APK :)