google is not defined

[Newbie012]

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")

• [ ] Android
• [ ] iOS
• [X] Browser

cordova information: (run $> cordova plugin list)

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.5.0-beta-20181020-0912 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 2.2.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-plugin-x-socialsharing 5.4.1 "SocialSharing"
es6-promise-plugin 4.2.2 "Promise"

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": "5.0.0-beta.21",
"@ionic-native/google-maps": "^5.0.0-beta.24",

Current behavior:

Exception calling native with command :: PluginGeocoder :: geocode ::exception=ReferenceError: google is not defined

Expected behavior:

The method should return Promise<GeocoderResult[] | BaseArrayClass<GeocoderResult>> just as decribed here

Screen capture or video record:

Posted Above

PS - I have seen only older solutions regarding this issue, by removing async and defer from the <script> tag. But I don't use <script>` tags at all.

[wf9a5m75]

Please share your project files on github.

[Newbie012]

@wf9a5m75 It's a private project, so I sent you an invitation.

To reproduce this issue:

1. npm install
2. npm run cordova browser -l
3. go to /home

The code is written in ./src/app/home/home.page.ts.

[wf9a5m75]

Let me confirm one thing. Regarding of the step2, I think ionic cordova run browser -l instead ofnpm run cordova browser -l`, correct?

[wf9a5m75]

As far as I test your code on my mac, I think your code has problem.

[Newbie012]

I meant Ionic cordova.

About the problem - I have no idea how would you get this kind of error. I forgot to tell you to switch to fix-map branch. If the error still appears, let me know and I'll look into it.

[wf9a5m75]

Don't steal my time, please.

[Newbie012]

I'm sorry. That was not my intention. I have moved everything to the master so the only thing left to do is to pull the new changes.

If it takes too much from your time, I'll get it.

[wf9a5m75]

[wf9a5m75]

masashi-macgms:security-kids masashi$ git branch
* master
masashi-macgms:security-kids masashi$ git pull
Already up to date.
masashi-macgms:security-kids masashi$ ls
README.md       e2e         firestore.rules     package.json        tsconfig.json
angular.json        firebase.json       functions       resources       tslint.json
config.xml      firestore.indexes.json  ionic.config.json   src
masashi-macgms:security-kids masashi$ ls -l
total 96
-rw-r--r--   1 masashi  staff   934 Nov  8 09:09 README.md
-rw-r--r--   1 masashi  staff  4989 Nov  8 09:09 angular.json
-rw-r--r--   1 masashi  staff  7013 Nov  8 09:09 config.xml
drwxr-xr-x   5 masashi  staff   160 Nov  8 09:09 e2e
-rw-r--r--   1 masashi  staff   491 Nov  8 09:09 firebase.json
-rw-r--r--   1 masashi  staff    19 Nov  8 09:09 firestore.indexes.json
-rw-r--r--   1 masashi  staff   131 Nov  8 09:09 firestore.rules
drwxr-xr-x   7 masashi  staff   224 Nov  8 09:09 functions
-rw-r--r--   1 masashi  staff   117 Nov  8 09:09 ionic.config.json
-rw-r--r--   1 masashi  staff  3471 Nov  8 09:09 package.json
drwxr-xr-x   7 masashi  staff   224 Nov  8 09:09 resources
drwxr-xr-x  14 masashi  staff   448 Nov  8 09:09 src
-rw-r--r--   1 masashi  staff   481 Nov  8 09:09 tsconfig.json
-rw-r--r--   1 masashi  staff  2915 Nov  8 09:09 tslint.json
masashi-macgms:security-kids masashi$ npm i
npm WARN deprecated path-is-absolute@2.0.0: This package is no longer relevant as Node.js 0.12 is unmaintained.
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.

> fsevents@1.2.4 install /Users/masashi/Documents/workspace2/test/security-kids/node_modules/fsevents
> node install

[fsevents] Success: "/Users/masashi/Documents/workspace2/test/security-kids/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> grpc@1.13.1 install /Users/masashi/Documents/workspace2/test/security-kids/node_modules/grpc
> node-pre-gyp install --fallback-to-build --library=static_library

node-pre-gyp WARN Using request for node-pre-gyp https download 
[grpc] Success: "/Users/masashi/Documents/workspace2/test/security-kids/node_modules/grpc/src/node/extension_binary/node-v64-darwin-x64-unknown/grpc_node.node" is installed via remote

> node-sass@4.9.3 install /Users/masashi/Documents/workspace2/test/security-kids/node_modules/node-sass
> node scripts/install.js

Cached binary found at /Users/masashi/.npm/node-sass/4.9.3/darwin-x64-64_binding.node

> node-sass@4.9.3 postinstall /Users/masashi/Documents/workspace2/test/security-kids/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/masashi/Documents/workspace2/test/security-kids/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @ionic-native/google-maps@5.0.0-beta.25 requires a peer of @ionic-native/core@5.0.0-beta.25 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic/pro@2.0.3 requires a peer of cordova-plugin-ionic@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/devtools-plugin@3.2.0 requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/form-plugin@3.2.0 requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/form-plugin@3.2.0 requires a peer of @angular/forms@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/router-plugin@3.2.0 requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/router-plugin@3.2.0 requires a peer of @angular/router@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @ngxs/store@3.2.0 requires a peer of @angular/core@>=5.0.0 <7.0.0 but none is installed. You must install peer dependencies yourself.

added 1431 packages from 1260 contributors in 85.062s
masashi-macgms:security-kids masashi$ ionic cordova run browser -l
✔ Creating ./www directory for you - done!
> cordova platform add browser --save
Using cordova-fetch for cordova-browser@5.0.4
Adding browser project...
Creating Cordova project for cordova-browser:
    Path: /Users/masashi/Documents/workspace2/test/security-kids/platforms/browser
    Name: security-kids
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for browser
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for browser
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for browser
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for browser
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-ionic-webview" in config.xml. Adding it to the project
Installing "cordova-plugin-ionic-webview" for browser
Adding cordova-plugin-ionic-webview to package.json
Saved plugin info for "cordova-plugin-ionic-webview" to config.xml
Discovered plugin "cordova-plugin-ionic-keyboard" in config.xml. Adding it to the project
Installing "cordova-plugin-ionic-keyboard" for browser
Adding cordova-plugin-ionic-keyboard to package.json
Saved plugin info for "cordova-plugin-ionic-keyboard" to config.xml
Discovered plugin "cordova-plugin-x-socialsharing" in config.xml. Adding it to the project
Installing "cordova-plugin-x-socialsharing" for browser
Installing "es6-promise-plugin" for browser
Adding cordova-plugin-x-socialsharing to package.json
Saved plugin info for "cordova-plugin-x-socialsharing" to config.xml
Discovered plugin "cordova-plugin-googlemaps" in config.xml. Adding it to the project
Installing "cordova-plugin-googlemaps" for browser

      Official document https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.3.0/README.md Please consider to buy a beer for us 🍺 https://github.com/mapsplugin/cordova-plugin-googlemaps#buy-us-a-beer

Adding cordova-plugin-googlemaps to package.json
Saved plugin info for "cordova-plugin-googlemaps" to config.xml
--save flag or autosave detected
Saving browser@~5.0.4 into config.xml file ...
> ng run app:ionic-cordova-serve --host=0.0.0.0 --port=8100 --platform=browser
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

       Local: http://localhost:8100
       External: http://192.168.86.25:8100

       Use Ctrl+C to quit this process

> cordova run browser
[cordova]  startPage = http://192.168.86.25:8100
[cordova]  Static file server running @ http://192.168.86.25:8100/
[cordova]  CTRL + C to shut down
[ng] ℹ ｢wdm｣: wait until bundle finished: /
[ng] 
[ng] Date: 2018-11-08T17:20:33.974Z
[ng] Hash: 575ffd6358e139d7153d
[ng] Time: 46986ms
[ng] chunk {common} common.js, common.js.map (common) 21.3 kB  [rendered]
[ng] chunk {77} 77.js, 77.js.map () 7.21 kB  [rendered]
[ng] chunk {cordova} cordova.js, cordova.js.map (cordova) 59.3 kB  [rendered]
[ng] chunk {0} 0.js, 0.js.map () 18.1 kB  [rendered]
[ng] chunk {1} 1.js, 1.js.map () 93.4 kB  [rendered]
[ng] chunk {2} 2.js, 2.js.map () 1.85 kB  [rendered]
[ng] chunk {3} 3.js, 3.js.map () 1.06 kB  [rendered]
[ng] chunk {4} 4.js, 4.js.map () 3.18 kB  [rendered]
[ng] chunk {5} 5.js, 5.js.map () 5.99 kB  [rendered]
[ng] chunk {6} 6.js, 6.js.map () 14.4 kB  [rendered]
[ng] chunk {7} 7.js, 7.js.map () 1.62 kB  [rendered]
[ng] chunk {8} 8.js, 8.js.map () 2.7 kB  [rendered]
[ng] chunk {9} 9.js, 9.js.map () 1.36 kB  [rendered]
[ng] chunk {10} 10.js, 10.js.map () 7.92 kB  [rendered]
[ng] chunk {11} 11.js, 11.js.map () 5.03 kB  [rendered]
[ng] chunk {12} 12.js, 12.js.map () 25.8 kB  [rendered]
[ng] chunk {13} 13.js, 13.js.map () 26.7 kB  [rendered]
[ng] chunk {14} 14.js, 14.js.map () 28.5 kB  [rendered]
[ng] chunk {15} 15.js, 15.js.map () 29.5 kB  [rendered]
[ng] chunk {16} 16.js, 16.js.map () 40 kB  [rendered]
[ng] chunk {17} 17.js, 17.js.map () 41.7 kB  [rendered]
[ng] chunk {18} 18.js, 18.js.map () 13.4 kB  [rendered]
[ng] chunk {19} 19.js, 19.js.map () 13.4 kB  [rendered]
[ng] chunk {20} 20.js, 20.js.map () 33.5 kB  [rendered]
[ng] chunk {21} 21.js, 21.js.map () 33.5 kB  [rendered]
[ng] chunk {22} 22.js, 22.js.map () 12.4 kB  [rendered]
[ng] chunk {23} 23.js, 23.js.map () 12.4 kB  [rendered]
[ng] chunk {24} 24.js, 24.js.map () 10.2 kB  [rendered]
[ng] chunk {25} 25.js, 25.js.map () 10.2 kB  [rendered]
[ng] chunk {26} 26.js, 26.js.map () 47.4 kB  [rendered]
[ng] chunk {27} 27.js, 27.js.map () 47.4 kB  [rendered]
[ng] chunk {28} 28.js, 28.js.map () 20.8 kB  [rendered]
[ng] chunk {29} 29.js, 29.js.map () 21 kB  [rendered]
[ng] chunk {30} 30.js, 30.js.map () 21.7 kB  [rendered]
[ng] chunk {31} 31.js, 31.js.map () 22 kB  [rendered]
[ng] chunk {32} 32.js, 32.js.map () 25.8 kB  [rendered]
[ng] chunk {33} 33.js, 33.js.map () 26.6 kB  [rendered]
[ng] chunk {34} 34.js, 34.js.map () 21.1 kB  [rendered]
[ng] chunk {35} 35.js, 35.js.map () 21.3 kB  [rendered]
[ng] chunk {36} 36.js, 36.js.map () 19.5 kB  [rendered]
[ng] chunk {37} 37.js, 37.js.map () 19.8 kB  [rendered]
[ng] chunk {38} 38.js, 38.js.map () 20.3 kB  [rendered]
[ng] chunk {39} 39.js, 39.js.map () 20.4 kB  [rendered]
[ng] chunk {40} 40.js, 40.js.map () 28.3 kB  [rendered]
[ng] chunk {41} 41.js, 41.js.map () 28.6 kB  [rendered]
[ng] chunk {42} 42.js, 42.js.map () 21.9 kB  [rendered]
[ng] chunk {43} 43.js, 43.js.map () 22.1 kB  [rendered]
[ng] chunk {44} 44.js, 44.js.map () 23.3 kB  [rendered]
[ng] chunk {45} 45.js, 45.js.map () 23.7 kB  [rendered]
[ng] chunk {46} 46.js, 46.js.map () 20.3 kB  [rendered]
[ng] chunk {47} 47.js, 47.js.map () 20.3 kB  [rendered]
[ng] chunk {48} 48.js, 48.js.map () 15.1 kB  [rendered]
[ng] chunk {49} 49.js, 49.js.map () 15.1 kB  [rendered]
[ng] chunk {50} 50.js, 50.js.map () 21.4 kB  [rendered]
[ng] chunk {51} 51.js, 51.js.map () 21.6 kB  [rendered]
[ng] chunk {52} 52.js, 52.js.map () 28.3 kB  [rendered]
[ng] chunk {53} 53.js, 53.js.map () 28.5 kB  [rendered]
[ng] chunk {54} 54.js, 54.js.map () 20.8 kB  [rendered]
[ng] chunk {55} 55.js, 55.js.map () 21 kB  [rendered]
[ng] chunk {56} 56.js, 56.js.map () 26.2 kB  [rendered]
[ng] chunk {57} 57.js, 57.js.map () 26.7 kB  [rendered]
[ng] chunk {58} 58.js, 58.js.map () 27.4 kB  [rendered]
[ng] chunk {59} 59.js, 59.js.map () 27.6 kB  [rendered]
[ng] chunk {60} 60.js, 60.js.map () 22.5 kB  [rendered]
[ng] chunk {61} 61.js, 61.js.map () 23 kB  [rendered]
[ng] chunk {62} 62.js, 62.js.map () 25.4 kB  [rendered]
[ng] chunk {63} 63.js, 63.js.map () 25.4 kB  [rendered]
[ng] chunk {64} 64.js, 64.js.map () 34.6 kB  [rendered]
[ng] chunk {65} 65.js, 65.js.map () 35.1 kB  [rendered]
[ng] chunk {66} 66.js, 66.js.map () 21.4 kB  [rendered]
[ng] chunk {67} 67.js, 67.js.map () 21.4 kB  [rendered]
[ng] chunk {68} 68.js, 68.js.map () 35.5 kB  [rendered]
[ng] chunk {69} 69.js, 69.js.map () 35.6 kB  [rendered]
[ng] chunk {70} 70.js, 70.js.map () 9.52 kB  [rendered]
[ng] chunk {71} 71.js, 71.js.map () 9.53 kB  [rendered]
[ng] chunk {72} 72.js, 72.js.map () 22.9 kB  [rendered]
[ng] chunk {73} 73.js, 73.js.map () 22.9 kB  [rendered]
[ng] chunk {74} 74.js, 74.js.map () 9.54 kB  [rendered]
[ng] chunk {75} 75.js, 75.js.map () 9.76 kB  [rendered]
[ng] chunk {76} 76.js, 76.js.map () 7.05 kB  [rendered]
[ng] chunk {78} 78.js, 78.js.map () 17.9 kB  [rendered]
[ng] chunk {79} 79.js, 79.js.map () 17.9 kB  [rendered]
[ng] chunk {80} 80.js, 80.js.map () 22.9 kB  [rendered]
[ng] chunk {81} 81.js, 81.js.map () 22.9 kB  [rendered]
[ng] chunk {82} 82.js, 82.js.map () 13 kB  [rendered]
[ng] chunk {83} 83.js, 83.js.map () 13 kB  [rendered]
[ng] chunk {84} 84.js, 84.js.map () 34.6 kB  [rendered]
[ng] chunk {85} 85.js, 85.js.map () 35.2 kB  [rendered]
[ng] chunk {86} 86.js, 86.js.map () 17.9 kB  [rendered]
[ng] chunk {87} 87.js, 87.js.map () 17.9 kB  [rendered]
[ng] chunk {88} 88.js, 88.js.map () 32.1 kB  [rendered]
[ng] chunk {89} 89.js, 89.js.map () 33.4 kB  [rendered]
[ng] chunk {90} 90.js, 90.js.map () 29 kB  [rendered]
[ng] chunk {91} 91.js, 91.js.map () 30 kB  [rendered]
[ng] chunk {92} 92.js, 92.js.map () 23.3 kB  [rendered]
[ng] chunk {93} 93.js, 93.js.map () 23.7 kB  [rendered]
[ng] chunk {94} 94.js, 94.js.map () 39.6 kB  [rendered]
[ng] chunk {95} 95.js, 95.js.map () 41.4 kB  [rendered]
[ng] chunk {96} 96.js, 96.js.map () 3.43 kB  [rendered]
[ng] chunk {97} 97.js, 97.js.map () 3.51 kB  [rendered]
[ng] chunk {98} 98.js, 98.js.map () 31.3 kB  [rendered]
[ng] chunk {99} 99.js, 99.js.map () 31.4 kB  [rendered]
[ng] chunk {100} 100.js, 100.js.map () 10.1 kB  [rendered]
[ng] chunk {101} 101.js, 101.js.map () 10.1 kB  [rendered]
[ng] chunk {102} 102.js, 102.js.map () 9.67 kB  [rendered]
[ng] chunk {103} 103.js, 103.js.map () 9.9 kB  [rendered]
[ng] chunk {104} 104.js, 104.js.map () 3.43 kB  [rendered]
[ng] chunk {105} 105.js, 105.js.map () 3.5 kB  [rendered]
[ng] chunk {106} 106.js, 106.js.map () 17.6 kB  [rendered]
[ng] chunk {107} 107.js, 107.js.map () 17.8 kB  [rendered]
[ng] chunk {108} 108.js, 108.js.map () 21.2 kB  [rendered]
[ng] chunk {109} 109.js, 109.js.map () 21.3 kB  [rendered]
[ng] chunk {110} 110.js, 110.js.map () 19.4 kB  [rendered]
[ng] chunk {111} 111.js, 111.js.map () 19.7 kB  [rendered]
[ng] chunk {112} 112.js, 112.js.map () 27.8 kB  [rendered]
[ng] chunk {113} 113.js, 113.js.map () 28.6 kB  [rendered]
[ng] chunk {114} 114.js, 114.js.map () 19.6 kB  [rendered]
[ng] chunk {115} 115.js, 115.js.map () 19.9 kB  [rendered]
[ng] chunk {116} 116.js, 116.js.map () 20.5 kB  [rendered]
[ng] chunk {117} 117.js, 117.js.map () 20.6 kB  [rendered]
[ng] chunk {118} 118.js, 118.js.map () 20.8 kB  [rendered]
[ng] chunk {119} 119.js, 119.js.map () 21 kB  [rendered]
[ng] chunk {120} 120.js, 120.js.map () 21 kB  [rendered]
[ng] chunk {121} 121.js, 121.js.map () 21 kB  [rendered]
[ng] chunk {122} 122.js, 122.js.map () 27.4 kB  [rendered]
[ng] chunk {123} 123.js, 123.js.map () 27.4 kB  [rendered]
[ng] chunk {124} 124.js, 124.js.map () 31.4 kB  [rendered]
[ng] chunk {125} 125.js, 125.js.map () 32.7 kB  [rendered]
[ng] chunk {126} 126.js, 126.js.map () 27.5 kB  [rendered]
[ng] chunk {127} 127.js, 127.js.map () 27.8 kB  [rendered]
[ng] chunk {128} 128.js, 128.js.map () 34.5 kB  [rendered]
[ng] chunk {129} 129.js, 129.js.map () 34.9 kB  [rendered]
[ng] chunk {130} 130.js, 130.js.map () 17.6 kB  [rendered]
[ng] chunk {131} 131.js, 131.js.map () 17.7 kB  [rendered]
[ng] chunk {132} 132.js, 132.js.map () 21.9 kB  [rendered]
[ng] chunk {133} 133.js, 133.js.map () 22.3 kB  [rendered]
[ng] chunk {134} 134.js, 134.js.map () 9.7 kB  [rendered]
[ng] chunk {135} 135.js, 135.js.map () 9.72 kB  [rendered]
[ng] chunk {136} 136.js, 136.js.map () 20.8 kB  [rendered]
[ng] chunk {137} 137.js, 137.js.map () 21.1 kB  [rendered]
[ng] chunk {138} 138.js, 138.js.map () 35.6 kB  [rendered]
[ng] chunk {139} 139.js, 139.js.map () 35.7 kB  [rendered]
[ng] chunk {140} 140.js, 140.js.map () 21.4 kB  [rendered]
[ng] chunk {141} 141.js, 141.js.map () 21.4 kB  [rendered]
[ng] chunk {142} 142.js, 142.js.map () 21.1 kB  [rendered]
[ng] chunk {143} 143.js, 143.js.map () 21.4 kB  [rendered]
[ng] chunk {144} 144.js, 144.js.map () 2.45 kB  [rendered]
[ng] chunk {145} 145.js, 145.js.map () 2.48 kB  [rendered]
[ng] chunk {146} 146.js, 146.js.map () 47.4 kB  [rendered]
[ng] chunk {147} 147.js, 147.js.map () 47.4 kB  [rendered]
[ng] chunk {148} 148.js, 148.js.map () 21.2 kB  [rendered]
[ng] chunk {149} 149.js, 149.js.map () 21.3 kB  [rendered]
[ng] chunk {150} 150.js, 150.js.map () 33.9 kB  [rendered]
[ng] chunk {151} 151.js, 151.js.map () 34.3 kB  [rendered]
[ng] chunk {152} 152.js, 152.js.map () 21.1 kB  [rendered]
[ng] chunk {153} 153.js, 153.js.map () 21.4 kB  [rendered]
[ng] chunk {154} 154.js, 154.js.map () 19.6 kB  [rendered]
[ng] chunk {155} 155.js, 155.js.map () 19.7 kB  [rendered]
[ng] chunk {156} 156.js, 156.js.map () 12.9 kB  [rendered]
[ng] chunk {157} 157.js, 157.js.map () 12.9 kB  [rendered]
[ng] chunk {158} 158.js, 158.js.map () 3.05 kB  [rendered]
[ng] chunk {159} 159.js, 159.js.map () 3.14 kB  [rendered]
[ng] chunk {160} 160.js, 160.js.map () 13.9 kB  [rendered]
[ng] chunk {161} 161.js, 161.js.map () 13.9 kB  [rendered]
[ng] chunk {kid-kid-module} kid-kid-module.js, kid-kid-module.js.map (kid-kid-module) 32.8 kB  [rendered]
[ng] chunk {162} 162.js, 162.js.map () 3.88 kB  [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 222 kB [initial] [rendered]
[ng] chunk {163} 163.js, 163.js.map () 1.69 kB  [rendered]
[ng] chunk {default~kid-kid-module~my-kids-my-kids-module~plans-plans-module} default~kid-kid-module~my-kids-my-kids-module~plans-plans-module.js, default~kid-kid-module~my-kids-my-kids-module~plans-plans-module.js.map (default~kid-kid-module~my-kids-my-kids-module~plans-plans-module) 33.9 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 14.6 kB  [rendered]
[ng] chunk {login-login-module} login-login-module.js, login-login-module.js.map (login-login-module) 18.3 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 236 kB [initial] [rendered]
[ng] chunk {my-kids-my-kids-module} my-kids-my-kids-module.js, my-kids-my-kids-module.js.map (my-kids-my-kids-module) 44.8 kB  [rendered]
[ng] chunk {plans-plans-module} plans-plans-module.js, plans-plans-module.js.map (plans-plans-module) 27.7 kB  [rendered]
[ng] chunk {register-register-module} register-register-module.js, register-register-module.js.map (register-register-module) 15.4 kB  [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 9.2 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 68.1 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 6.83 MB [initial] [rendered]
[ng] ℹ ｢wdm｣: Compiled successfully.
^C[ERROR] Non-zero exit from subprocess.
masashi-macgms:security-kids masashi$

[Newbie012]

I'll try to reproduce these errors in the next few hours and I'll keep you posted.

[Newbie012]

I tried to reproduce the errors you presented, but I couldn't (I tested on two different machines). So I created a fresh ionic 4.0.0.beta15 app and I installed this package.

After I started the app, I installed the desired dependencies and I modified the files home/home.page.(ts/scss/html) (just like it was written in the examples) and then I added the suffix /ngx to the imports since I use angular.

After that, I added

Geocoder.geocode({
    address: 'Washington DC'
})
    .then(console.log)
    .catch(console.error)

but I got the same error as before:

Exception calling native with command :: PluginGeocoder :: geocode ::exception=ReferenceError: google is not defined

This error appears no matter if I put the api keys or if I don't.

Reproduce:

1. clone https://github.com/Newbie012/ionic-angular-geocode
2. npm i
3. ionic cordova platform add browser --save
4. ionic cordova run browser -l
5. See error.

[wf9a5m75]

Regarding of your screen shot, you got InvalidKeyMapError message. I think that's the problem.

You need to set the API key or do not set the key.

[Newbie012]

I removed the API keys since I made it a public project. It doesn't work even when I put the API keys on.

I quote:

This error appears no matter if I put the api keys or if I don't.

[wf9a5m75]

Ok, I finally reproduced your issue.

You need to change your code like this.

Because this plugin loads Google Maps JavaScript library when you execute GoogleMaps.create().

When the loading complete, the map fires GoogleMapsEvent.MAP_READY event. Then you can use Geocoder.

export class HomePage implements OnInit {
    map: GoogleMap;

    constructor(private platform: Platform) { }

    async ngOnInit() {
      await this.platform.ready();
      await this.loadMap();
    }

    async loadMap() {

        // This code is necessary for browser
        // Environment.setEnv({
        //     'API_KEY_FOR_BROWSER_RELEASE': '...',
        //     'API_KEY_FOR_BROWSER_DEBUG': '...'
        // });

        const mapOptions: GoogleMapOptions = {
            camera: {
                target: {
                    lat: 43.0741904,
                    lng: -89.3809802
                },
                zoom: 18,
                tilt: 30
            }
        };

        this.map = GoogleMaps.create('map_canvas', mapOptions);

        this.map.one(GoogleMapsEvent.MAP_READY).then(() => {

          Geocoder.geocode({
              address: 'Washington DC'
          }).then((result) => {
            console.log("geocoder", result);
          })
          .catch((error) => {
            console.error("geocoder", error);
          });
        });

        const marker: Marker = this.map.addMarkerSync({
            title: 'Ionic',
            icon: 'blue',
            animation: 'DROP',
            position: {
                lat: 43.0741904,
                lng: -89.3809802
            }
        });
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
            alert('clicked');
        });
    }
}

[Newbie012]

Epic. Thank you.

[AnnaHui]

I have the same issue, and have no idea

[mpallante]

Hello, waiting for the MAP_READY event of Google Maps seems to work, but I have a little different situation.

I need to call Geocoder.geocode() without having an available map. In my Ionic 4 app, I need to track the device position with Geolocation plugin and then let Google give me the address of the current position. So I have the following code:

    Environment.setEnv({
      'API_KEY_FOR_BROWSER_RELEASE': 'xxx',
      'API_KEY_FOR_BROWSER_DEBUG': 'xxx'
    });

    this.watch = Geolocation.watchPosition({
      // just some test value
      timeout: 15000,
      maximumAge: 1000,
      enableHighAccuracy: false
    });

    this.watch.subscribe((data) => {
      console.log(data);
      let request: GeocoderRequest = {
        position: new LatLng(data.latitude, data.longitude)
      };

      Geocoder.geocode(request).then((results) => {
        console.log(results);
      }).catch((reason) => {
        console.log(reason);
      });
    });

In console, I correctly get the position, but then the Geocoder.geocode() call gives me the OP error:

Exception calling native with command :: PluginGeocoder :: geocode ::exception=ReferenceError: google is not defined

My code belongs to a service that is injected into the app.components.ts and is not bound to any view, so it is not easy to create a map object.

Any idea?

Btw, these are the plugins I'm using:

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-googlemaps 2.6.0 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"

while these are the lines from package.json

"@ionic-native/core": "^5.4.0",
"@ionic-native/geolocation": "^5.5.0",
"@ionic-native/google-maps": "^5.5.0",

[mpallante]

I'm not sure this is the right way to do this, but I made it works.

I just added a <script> tag in the index.html file of the project:

<head>
  ...

  <script src="https://maps.google.com/maps/api/js?key=MYAPIKEY"></script>

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  ...
</head>

and removed the Environment.setEnv( ... ).