Using --prod cordova google maps markers disappear

Ionic Framework ionic-v3
1

Hi guys,

This is blowing my mind…

I don’t know why using cordova google maps plugin on my ionic2 app when I use “ionic run android” my app works perfect but when I run “ionic run android --prod” the app works but in the maps there is no marker at all.

I followed the known steps generating the apikey and enabling it for android and ios apps.

ionic plugin add cordova-plugin-geolocation --save
npm install @ionic-native/geolocation --save

ionic plugin add 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” --save
npm install @ionic-native/google-maps --save

And I also tried to generate the app running “ionic build android --prod --release” and then I signed and aligned the app but it still the same, no markers at all.

Any idea?

I’m totally stucked wth it.

Cheers.

2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.

--prod does all kinds of code optimizations, sometimes code that works without doesn’t with it because one found way to write code that just doesn’t, using class names in code etc.

Where do you get these markers that normally should show up on the map? How do you add them?

3

Hi debugged it but there is no error at all.
I use native google maps cordova to show maps and markers.
I get those markers positions form api rest which is working properly as well.
I’ve tried to use :
import {enableProdMode} from ‘@angular/core’;
enableProdMode();

Instead of use --prod but it is not the same. The app needs too much time to start than when I use --prod, but the markers are shown.

I’ve already added CSP:

 <meta http-equiv="Content-Security-Policy" content="default-src *; img-src * 'self' data: https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Just in case something couldn’t be loaded, but no success…

Any idea?

thanks @Sujan12

4

You never need to manually interact with this in Ionic, it is taken care of in the build process.

Are you missing a “not” here?

Did you add console.log to make sure you really get the marker positions and they really are transformed the way you want them?

Can you show us the code you use to place the markers?

5

I’ve finally found the problem.
In order to show the markers I was asking for the current page to show certain markers.
I do something like:

 if( this.navCtrl.getActive().name == "GeneralMap" ){
                this.setMarkers();
 }

So if I don’t use --prod , this.navCtrl.getActive().name returns me “GeneralMap” so It calls this.setMarkers() but if I use --prod this.navCtrl.getActive().name returns ‘t’, so this.setMarkers() is never called.

So why can’t I get the currect page when I use --prod???

thanks @Sujan12

6

--prod makes your code smaller, also by optimizing the naming of Classes (and Pages). So that’s why the name is ‘r’ when using the optimized code.

There are other ways to do this, but I don’t know them. Hope someone else can explain how something like this should be done.

7

Anyway thank you so much @Sujan12
I hope anyone can help me…
Cheers.

8

Because minification. Never rely on class names in your code. I also don’t know where the code you pasted actually lives, but there’s only one proper place for it, and that’s inside GeneralMap’s lifecycle events (like ionViewDidEnter()), at which point you don’t need to be asking the navigation controller anything: you know GeneralMap is active. Nobody outside GeneralMap should be concerned with this, or your design is too tightly coupled.

1 Like