Cordova-plugin-googlemaps: 'getMap' is not defined in GoogleMaps plugin. - googlemaps-cdv-plugin.js:133

[pawelduszczak]

Hi.
I'm gaving issuies with getting this plugin to work properly. As in title, I'm getting error in console:
googlemaps-cdv-plugin.js:133 'getMap' is not defined in GoogleMaps plugin.
BaseClass.self.errorHandler @ googlemaps-cdv-plugin.js:133
callbackFromNative @ cordova.js:295
processMessage @ cordova.js:1081
processMessages @ cordova.js:1104
pollOnce @ cordova.js:973
pollOnceFromOnlineEvent @ cordova.js:960

I was searching for some time now and couldn't figure why. I've checked all API keys, I've updated plugin from GIT, also tried clean install, checked if keys are in config file and manifest, check all simillar issues on one of Your wiki pages and still no luck. I'm using cordova with ionic framework. I'm testing on few devices not emulators. Strangly if I refresh page from Chrome inspect console this error is gone. It occures only on first launch of the applikaction. Can someone help me with this? Current i'm out of ideas.

The part where i initialize the map looks like this:

$APP.controller('LocalizationController', ['MapsService', '$scope', '$ionicPlatform', '$ionicModal',
       function ($MapsService, $scope, $ionicPlatform, $ionicModal) {
        $scope.map, $scope.markers = {}, $scope.service;
        $ionicPlatform.ready(function () {
            $(document).ready(function(){
                $('#map_canvas').height($(document).height() - $('.top').outerHeight() - $('.app-top').outerHeight());
                if (plugin) {
                    plugin.google.maps.Map.isAvailable(function (isAvailable, message) {
                        if (isAvailable) {
                            console.log(document.getElementById("map_canvas"));
                            $scope.map = plugin.google.maps.Map.getMap(document.getElementById("map_canvas"));
                            $scope.map.addEventListener(plugin.google.maps.event.MAP_READY, function () {
                                $scope.map.setOptions({
                                    backgroundColor: 'white',
                                    mapType: plugin.google.maps.MapTypeId.ROADMAP,
                                    controls: {
                                        'compass': false,
                                        'myLocationButton': false,
                                        'indoorPicker': false,
                                        'zoom': false
                                    },
                                    gestures: {
                                        'tilt': false,
                                        'rotate': false
                                    }
                                });
                            });
                        } else {
                        }
                    });
                }
            });
        });
        $scope.$on('$ionicView.enter', function (e) {
        });
    }]);

[wf9a5m75]

Hmm, it is difficult to give advice, but try to wrap the getMap() method with setTimeout() statement.

setTimeout(function() {
  $scope.map = plugin.google.maps.Map.getMap(document.getElementById("map_canvas"));
  $scope.map.addEventListener(plugin.google.maps.event.MAP_READY, function () {
      $scope.map.setOptions({
          backgroundColor: 'white',
          mapType: plugin.google.maps.MapTypeId.ROADMAP,
          controls: {
              'compass': false,
              'myLocationButton': false,
              'indoorPicker': false,
              'zoom': false
          },
          gestures: {
              'tilt': false,
              'rotate': false
          }
      });
  });
}, 100);

[pawelduszczak]

Unfortunetly this doesn't help eather. I've done some more tests and also i simplified a code:

var map;
setTimeout(function () {
    $('#map_canvas').height($(document).height() - $('.top').outerHeight() - $('.app-top').outerHeight());
    plugin.google.maps.Map.isAvailable(function (isAvailable, message) {
        if (isAvailable) {
            alert('MAP IS AVAIBLE');
            map = plugin.google.maps.Map.getMap();
        } else {
        alert('MAP IS NOT AVAIBLE');
    }
});
}, 100);

As a result i'll have alert that map is avaible and when getMap is called error still occures. I've also moved to main file and still nothing. While testing there is something weird. When i run app with livepreview (ionic provides this rather nice tool) it all seems to be as it should. Next when i run same app without livepreview error occures no matter if it is debug or release version.

Is it possible that framework and/or angular is causing this?

[wf9a5m75]

When i run app with livepreview (ionic provides this rather nice tool) it all seems to be as it should. Next when i run same app without livepreview error occures no matter if it is debug or release version.

Regarding of your talk, it seems the Webkit problem.
WebKit is the rendering engine of the WebView(Android) and the UIWebView(iOS).
I noticed that the WebKit of the iOS sometimes does not draw the browser contents as transparent until redraw mandatory.

If you installed this plugin from npm, uninstall it, then reinstall from the git repository.

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

If you already installed this plugin from this git repository, reinstall it.
And even the latest code does not work, try like this before the map.getMap()

document.body.style.backgroundColor = "rgba(0,0,0,0)";
document.body.style.display='none';
document.body.offsetHeight;
document.body.style.display='';

[wf9a5m75]

If the above advices did not work, please provide a test project that reproduce your issue, including platforms directory.
Put your whole project files on github (or somewhere), then share the url please.
(Don't give me a large zipped file, or similar)
Please save my work and time.

[pawelduszczak]

Sorry for my english. It's not my native language.

Further research and new informactions came up. I did a copy of whole my app files and removed most of my code. Then i added files one by one (controllers, services). Trial and error method seemed to be most useful here. Due to testing i also renamed app from "bikeservice" to "bikeservice2" (only in cofing.xml file). After adding all files back to "bikeservice2" and testing each step all was working well (no errors). But when i changed name back from "bieservice2" to "bikeservice" error is present again, change name back to "bikeservice2" and error is gone again.

Changing only version in xml file didn't take any effect.

As the end result i think it is some problem with android itself. It seems that OS cached some way bad code and that is causing this error. Because this app is in use already i need to have some solution in case if some user will get same results.

So my question is it possible that this plugin is cached some way and is there a way to refresh cache or prevent cache entirely?

Here is also my config.xml, maybe here is something i can't see myself ("id" attrigute of "widget" tag and "name" tag was changed while renaming app):

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="pl.app.bikeservice" version="0.0.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>BikeService</name>
    <description>
        BikeService APP
    </description>
    <author email="[email protected]" href="http://company.pl/">
        Your Name Here
    </author>
    <content src="index.html"/>
    <access origin="*"/>
    <allow-navigation href="*"/>
    <preference name="webviewbounce" value="false"/>
    <preference name="UIWebViewBounce" value="false"/>
    <preference name="DisallowOverscroll" value="true"/>
    <preference name="SplashScreenDelay" value="2000"/>
    <preference name="FadeSplashScreenDuration" value="500"/>
    <preference name="AutoHideSplashScreen" value="false"/>
    <preference name="android-minSdkVersion" value="16"/>
    <preference name="BackupWebStorage" value="none"/>
    <preference name="SplashScreen" value="screen"/>
    <preference name="ShowSplashScreenSpinner" value="false"/>

    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar"/>
    </feature>
    <plugin name="cordova-plugin-device" spec="~1.1.3"/>
    <plugin name="cordova-plugin-console" spec="~1.0.4"/>
    <plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>
    <plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
    <plugin name="cordova-plugin-googlemaps">
        <param name="API_KEY_FOR_ANDROID" value="HERE_GOES_MY_API_KEY"/>
    </plugin>
    <platform name="ios">
        ...
    </platform>
    <platform name="android">
        ...
    </platform>
</widget>

[pawelduszczak]

There is again some new info. I've tested what i have to change in config.xml to get this app running. And all i need to change is "id" parameter in "widget" tag. So i suspect that there is sme connection between app id and plugin on the device, where some corrupted plugin or my app data is still on the device. Also i deleted the app and all its data with app manager in settings in the device. This operation didn't fix my problem with maps plugin.

Any ideas what is going on here and how to fix this issue without changing id of the map?

This app is on google play for some time and few people installed it. Main issue is i can't realy change id of the application.

[wf9a5m75]

Great inspecting. However,..

The problem is your id means it is not related technically to this plugin anymore.
This plugin uses the Google Maps Android API v2 in the official way, no hacking at all.
So there is no reason to block this plugin by Google (and other people use this plugin a lot).

The possible solution is that remove current API Key from Google APIs console, and register your finger print and your app ID, then generate your API again.
And try your app with another Android phone (not your phone).

Still occurred, no more help. You need to change your app ID, or contact Google by yourself.

[pawelduszczak]

Just to summary this issue if someone will have same problem.

All my tests are leading to google api. Because app is used on android and ios and on ios all works well i assume that google is for some reason bloking app in api for android. I think it is related to my trials and generating couple api keys in this process. Anyway, e-mail is sent to google with this issue and i'm still waiting for replay. If thre will some information i will let You know how it went.

[wf9a5m75]

Google simplified the API key today.
You can use the API key for both OS.
Try to recreate your key.

https://googlegeodevelopers.blogspot.com/2016/10/key-improvements-for-your-maps-api.html

[pawelduszczak]

And there is the solution. Very ugly approach but works.
Generating new API keys didn't help unfortunetly. Also no matter if i used key for andoir only or ios.
When i was testing issue again i noticed that when i lauch page where map is app returned same error as before. Then i went back to main page and again to page where map is and suprisingly it was warking. So i figured out that maybe some timeout should do the trick and so i did something like below. Where function startMap returns false if function getMap is undefined.

plugin.google.maps.Map.isAvailable(function (isAvailable, message) {
                if (isAvailable) {
                    document.body.style.backgroundColor = "rgba(0,0,0,0)";
                    document.body.style.display = 'none';
                    document.body.offsetHeight;
                    document.body.style.display = '';
                    if (startMap()) {

                    } else {
                        setTimeout(function () {
                            startMap();
                        }, 500);
                    }
                } else {
                }
            });

[canadaka]

I started having this same error today! no change to app code, I just updated Cordova and my Android SDK. I rolled back Cordova but the error still persisted and map won't load.

I manually rolled back the Google Play services SDK to 38 from 39, no change.

I had a laptop which I hadn't updated the Android SDK, so i proceeded to update each component one by one. I've tracked it down to the newest version of "Google Repository" v44 downgrading it to v42 the issue goes away.

[dennis-b]

Hi, i have 'getMap' is not defined in GoogleMaps plugin. error after upgrade to "Google Repository" v44
is there any solution without downgrading?
if i need do downgrade, how exactly it is done?

[fxlemire]

Same problem as @canadaka and @dennis-b. Also wondering how to downgrade, couldn't find Google Repository v42 anywhere... Thanks in advance!

[fxlemire]

I fixed it without downgrading (I'm using Ionic 2): I removed the android platform and the cordova plugin, reinstalled both and then inside project.properties, changed the fixed versions of map and locations to +

[bushev]

Hi guys!

I have tried @fxlemire solution, but without success..
I also tried @pawelduszczak solution, but without success too..

I have these dependencies installed:

Does anybody know a real root cause? It was some bug in play-services-maps:9.8.0 or what?

[grapemix]

We got it too. Interestingly, we ran into another problem related to project.properties too.
See #1208
The problem is resolved by editng project.properties's map and locations to 10.0.0. But then, we ran into this bug.

[jasonatt]

Changing the project.properties to the following also solved the getmap issue for me.

cordova.system.library.1=com.google.android.gms:play-services-maps:+
cordova.system.library.2=com.google.android.gms:play-services-location:+