Cordova-plugin-googlemaps: Google map target DIV is blank

[nmeri17]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [ ] iOS

cordova information: (run $> cordova plugin list)

branch-cordova-sdk 2.6.23 "branch-cordova-sdk"
cordova-plugin-device 2.0.1 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.2.9 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.0.5 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.16 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.3.2 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"
onesignal-cordova-plugin 2.3.2 "OneSignal Push Notifications"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "4.4.0",
"@ionic-native/google-maps": "^4.6.1"

Current behavior:

After the button is pressed or a location is searched, the target div of the map simply displays the text GOOGLE with neither map nor marker.

Expected behavior:

I just want the map div to load or display a map with the location parameters it is handed.

Screen capture or video record:

Related code, data or error log (please format your code or data):
sometimes, it throws the following errors

[ignore]map_0_830091793909.setOptions, because it's not ready
Uncaught (in promise): TypeError: Cannot read property 'position' of undefined

But mostly says nothing and doesn't display the map.

The component code can be found at this gist, while the markup is very basic

````

````

[wf9a5m75]

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v1.4.0/TroubleShooting/Blank-Map/README.md

[wf9a5m75]

Also you have to wait the MAP_READY event before executing any methods (in your case, map.setOptions()).
https://docs.google.com/presentation/d/1zlkmoSY4AzDJc_P4IqWLnzct41IqHyzGkLeyhlAxMDE/edit#slide=id.p

[nmeri17]

I generated a new API key but the issue still persists. Of the five possible causes of a blank map

1) I'm running on a real device and not an emulator, so I don't see any reason to use Google APIs x86 (Google Inc.) (Correct me if I'm wrong)

2) I've enabled the api key for android. This is my dashboard

3) I ran the Windows command both in my project root folder and on the platforms/android folder and it output a bunch of colon delimited hexadecimals as certificate fingerprints; however, I don't see where or how to insert it in the google api console as shown in point number 4). The console automatically allows/serves projects I create there and doesn't allow me to alter or include 'non-existent' apps

5) Not applicable, I don't use OnsenUI

[wf9a5m75]

Okay, please share your project files on github.

[wf9a5m75]

Also, did you enable the APIs before generating the API keys?

[makers-mark]

@nmeri17 In your cloud api dashboard there should be a dropdown (unless this is your first try). Are you on the right android v2 target? It is a little bit different than the javascript api key, a package name is matched up in this scenario.

[nmeri17]

No, I generated the key first. Is there any significance to the precedence?

[wf9a5m75]

The generated key is bound to the information which APIs are enabled at the time.
You need to regenerate the API keys.

[nmeri17]

It still doesn't work. deleted the old key and got a new one then ran C:\Users\project\path>ionic cordova plugin add cordova-plug
in-googlemaps --variable API_KEY_FOR_ANDROID="key here" --variable API_KEY_FOR_IOS="key here". it said

Plugin "cordova-plugin-googlemaps" already installed on android.

Adding cordova-plugin-googlemaps to package.json

Saved plugin info for "cordova-plugin-googlemaps" to config.xml

Then I did a gradle clean and ran on my device as usual but the map is still blank.

Have you ran my code at your end? All relevant data for the page is already in the gist I posted in my OP.
The project itself is well over 500mb and I currently lack the bandwidth to upload such enormous amount if data.

[wf9a5m75]

Plugin "cordova-plugin-googlemaps" already installed on android.

This means you did not uninstall the plugin before installing.

---

The project itself is well over 500mb and I currently lack the bandwidth to upload such enormous ...

Please create new project and share the files on github.

And as I said before, your code is wrong. Please fix it before sharing.

[nmeri17]

I uninstalled it and ran

plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="key here" --variable API_KEY_FOR_IOS="key here" and it still said the same thing it said before (Note: Even after successful uninstallation)
removed 1 package in 103.626s

Nevertheless, I installed the package afresh and got

• @ionic-native/[email protected]
  added 1 package in 40.492s

And ran on my device. Blank map. I've since edited my code to uncomment the on mapready portion. I simply removed it because everything inside it was inactive (console.logs etc). Here is my key: AIzaSyA82XW-aW3d3ccntHigluBhu3Fl0Y-SGD8. run it with this gist https://gist.github.com/nmeri17/2077edff9cd2e88a28ba23c07c38bdc8 and tell me what happens?

[nmeri17]

@wf9a5m75 Since, according to you, "no network request is made", why do I need a valid API key and all these stuff? Shouldn't it just be between your map and the longitude/latitude I supply it?

[wf9a5m75]

no network request is made

This means the native map view makes internal cache. Thus, the map works without map.
But map data itself comes from the Google through the Internet.

And the map needs to authorize with Google at the first time. You need to be online at the first time.

[wf9a5m75]

And did you read my advice?

this.map.setOptions( mapOptions); has to execute after the MAP_READY event.

[wf9a5m75]

ping

[nmeri17]

Sorry. My laptop charger got burnt two nights ago and is yet to be replaced. I'll get back to you as soon as I can. Many thanks.

[wf9a5m75]

ok

[caiotarifa]

I have the same problem. The MAP_READY event isn't running.

I tried running the setOptions before and after the event listener, but I got the following error:

[ignore]map_6_1286311801762.setOptions, because it's not ready.

I'm testing on my iOS device, the API keys are active and unrestricted.

[wf9a5m75]

If you have problem, please share your project files on GitHub

[nmeri17]

@caiotarifa thank you very much! The reason I commented out the event listener is because it's never triggered! For some reason, the map is never ready, because no matter how long you wait, alerting or consoling anything inside the listener block NEVER RUNS! I already told the plugin author that in my stack overflow thread but he keeps insisting the fault is from my end WITHOUT RUNNING ANY OF THE CODES I'VE SENT HIM.

Mr. @wf9a5m75 not everyone around the world has access to unlimited amounts of bandwidth and can upload project folders with astronomic sizes (like ionic's). The file I shared is my solitary interaction with your plugin. I shared the recommended portion of my package.json. it's up to you to run the code I've written and report whether the issue was replicable rather than merely debugging with your eyes.

I'd also recommend some sort of logging construct or status report so I can have an idea why my map isn't displaying before coming here for one unified solution. Why does one (which all your examples use) return a promise while on (which I'm more likely to use) return observables and we have no idea what rxjs method to pass it cuz we have no idea what's inside the observable?? That means you want your users debugging in the dark.

[wf9a5m75]

No contribution, no help.

[caiotarifa]

@nmeri17, yes... we have the same problem, but we need to provide concrete ways to replicate the bug.

You can:

1. Share the folder of your project.
2. Create a new project by copying only the map execution code.

In both cases, you will need to create a documentation explaining how to run your project.

It's the only way that the project owner or community will be able to help you.