Closed Newbie012 closed 5 years ago
Please share your project files on GitHub. Not pasting code.
If you don't mind, I've shared the project with you privately.
I think it has something to do with using @ionic/angular-toolkit
over @ionic/ng-toolkit
.
Will be fixed soon.
One reason of this error is you use ionic cordova browser -l
.
It seems the latest ionic v4 does not load cordova.js
when you run your app with -l (live-reload)
.
Here is the capture from your photo above.
As you said, running without live-reload will somehow resolve this error, but it still looks like there's something wrong with the integration with Cordova:
PS - I'm getting this warning even when I placed my API keys for Android + IOS in both config.xml
and package.json
:
util.js:225 Google Maps JavaScript API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
Should I add API_KEY_FOR_BROWSER
? or it's probably happening because of the rest of the errors.
Use
import {GoogleMap, ..., MyLocation,} from '@ionic-native/google-maps/ngx';
instead of
import {GoogleMap, ..., MyLocation,} from '@ionic-native/google-maps`;
on ionic 4.2.1
Then $> ionic cordova run browser
.
I'm having a similar issue but mine is referring to the Environment variables.
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'environment' of null
TypeError: Cannot read property 'environment' of null
at Function.push../node_modules/@ionic-native/google-maps/index.js.Environment.setEnv (index.js:543)
at home.page.ts:90
at new ZoneAwarePromise (zone.js:891)
at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home.page.ts:88)
at HomePage.<anonymous> (home.page.ts:60)
at step (home-home-module.js:2052)
at Object.next (home-home-module.js:2033)
at fulfilled (home-home-module.js:2024)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at Function.push../node_modules/@ionic-native/google-maps/index.js.Environment.setEnv (index.js:543)
at home.page.ts:90
at new ZoneAwarePromise (zone.js:891)
at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home.page.ts:88)
at HomePage.<anonymous> (home.page.ts:60)
at step (home-home-module.js:2052)
at Object.next (home-home-module.js:2033)
at fulfilled (home-home-module.js:2024)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at resolvePromise (zone.js:814)
at zone.js:724
at rejected (home-home-module.js:2025)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3820)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
at zone.js:872
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3811)`
We are using Capacitor (not sure if that matters as we are still using the cordova plugin.) Is there any way to fix this?
async ionViewDidEnter() {
console.log("didEnter");
this.resetAutoCompleteToken();
await this.platform.ready();
this.placesService = new google.maps.places.PlacesService(<HTMLDivElement>document.getElementById("places-attribs"));
const [position] = await this.withLoading(Promise.all([
this.getGeolocation(),
this.loadMap()
]));
//TODO: make geocodeAndMarkPosition a continuation of the above task so that an additional withloading is not required:
if (!!position) await this.withLoading(this.geocodeAndMarkPosition(position, "Your current location"));
this.searchField.value = '';
setTimeout(() => this.searchField.setFocus(), 100); //unfortunately somewhat arbitrary and may not always work.
}
loadMap() {
return new Promise((res, rej) => {
debugger;
Environment.setEnv({
API_KEY_FOR_BROWSER_DEBUG: environment.apiKeys.googleMaps.browserDebug
});
cordova-plugin-googlemaps does not support Capacitor.
If I add /ngx
, then I get the following error:
ERROR in src/app/home/home.page.ts(30,27): error TS2339: Property 'create' does not exist on type 'typeof GoogleMaps'.
It refers to the following code:
async loadMap() {
this.map = GoogleMaps.create('map_canvas', { // <-------------------
camera: {
target: {
lat: 43.0741704,
lng: -89.3809802
},
zoom: 18,
tilt: 30
}
});
}
WebStorm says:
Still using:
"@ionic-native/core": "5.0.0-beta.21",
"@ionic-native/google-maps": "^5.0.0-beta.23",
@Newbie012 Please reinstall @ionic-native/google-maps@5.0.0-beta.24
ionic s
Works without any errors
ionic cordova run browser
Works like a charm.
ionic cordova run browser -l
Triggers:
> ng run app:ionic-cordova-serve --host=0.0.0.0 --port=8101 --platform=browser
[ERROR] ng has unexpectedly closed (exit code 0).
The Ionic CLI will exit. Please check any output above for error details.
That's not this plugin's problem. Please ask to ionic team.
I'm submitting a ... (check one with "x")
If you choose 'problem or bug report', please select OS: (check one with "x")
cordova information: (run
$> cordova plugin list
)If you use
@ionic-native/google-maps
, please tell the package.json (only@ionic-native/core
and@ionic-native/google-maps
are fine mostly)Current behavior: On initializing
loadMap()
(given from the git example) triggers the following error:Expected behavior: Should present the map without triggering any errors.
Screen capture or video record:
Related code, data or error log (please format your code or data):
PS - For angular, shouldn't we
import {...} from '@ionic-native/google-maps/ngx'
? because importing from/ngx
will trigger an error.