Google Maps inconsistently displaying in Ionic app on Android device

@Sweg wrote:

I am adding Google Maps Javascript to my ionic app below.

The map is displaying as expected when I run ionic serve ,

However, when I try to run on my android device using below commands, the map is displaying sometimes , but not always.

1. ionic build
2. npx cap sync
3. npx cap open android

Can someone please tell me why this is occurring, & how it can be resolved?

Here is my code below, I’ll also show the console output in Android studio when I try to run the app:

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>
      Google Maps
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div #map id="map" [hidden]="!user"></div>
</ion-content>

Typescript:

  user = null;
  @ViewChild('map', { static: false }) mapElement: ElementRef;
  map: any;
  markers = [];
  watch = null;
  latLng = null;

  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) { }

  ionViewWillEnter() {
    this.anonLogin();
    this.loadMap();
  }

  anonLogin() {
    this.afAuth.auth.signInAnonymously().then(res => {
      this.user = res.user;
      this.watch = Geolocation.watchPosition({}, (position, err) => {
        if (position) {
          this.deleteMarkers();
          var newLocation = { lat: position.coords.latitude, lng: position.coords.longitude };
          this.addMarker(newLocation);
        }
      });
    });
  }

  addMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: this.map,
      animation: google.maps.Animation.BOUNCE,
    });
    this.markers.push(marker);
  }

  deleteMarkers() {
    this.clearMarkers();
    this.markers = [];
  }

  clearMarkers() {
    this.setMapOnAll(null);
  }

  setMapOnAll(map) {
    for (var i = 0; i < this.markers.length; i++) {
      this.markers[i].setMap(map);
    }
  }

  loadMap() {

    var locationOnLoad = null;

    Geolocation.getCurrentPosition().then((resp) => {
      this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
      locationOnLoad = { lat: resp.coords.latitude, lng: resp.coords.longitude };
    }).then(() => {

      this.map = new google.maps.Map(this.mapElement.nativeElement, {
        center: locationOnLoad,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      this.addMarker(locationOnLoad);

    }).catch((err) => {
      console.log(err);
    });
  }

And here is the console output when I try to run in Android Studio:

03/26 14:53:18: Launching ‘app’ on samsung SM-G965F. $ adb shell am start -n “io.ionic.starter/io.ionic.starter.MainActivity” -a android.intent.action.MAIN -c android.intent.category.LAUNCHER Connected to process 29347 on device ‘samsung-sm_g965f-2410169c6d0c7ece’. Capturing and displaying logcat messages from application. This behavior can be disabled in the “Logcat output” section of the “Debugger” settings page. E/Zygote: isWhitelistProcess - Process is Whitelisted E/Zygote: accessInfo : 1 I/SELinux: SELinux: seapp_context_lookup: seinfo=untrusted, level=s0:c139,c258,c512,c768, pkgname=io.ionic.starter I/o.ionic.starte: Late-enabling -Xcheck:jni D/ConnectivityManager_URSP: Ursp sIsUrsp=false, sIsCheckUrsp=false, uid=10651 D/Proxy: urspP is null: 10651 W/FirebaseApp: Default FirebaseApp failed to initialize because no default options were found. This usually means that com.google.gms:google-services was not applied to your gradle project. I/FirebaseInitProvider: FirebaseApp initialization unsuccessful D/libEGL: loaded /vendor/lib64/egl/libGLES_mali.so W/o.ionic.starte: Accessing hidden method Landroid/graphics/drawable/Drawable;->getOpticalInsets()Landroid/graphics/Insets; (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->left:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->right:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->top:I (light greylist, linking) Accessing hidden field Landroid/graphics/Insets;->bottom:I (light greylist, linking) E/o.ionic.starte: Invalid ID 0x00000000. W/o.ionic.starte: Accessing hidden method Landroid/view/View;->getAccessibilityDelegate()Landroid/view/View$AccessibilityDelegate; (light greylist, linking) W/o.ionic.starte: Accessing hidden method Landroid/view/View;->computeFitSystemWindows(Landroid/graphics/Rect;Landroid/graphics/Rect;)Z (light greylist, reflection) W/o.ionic.starte: Accessing hidden method Landroid/view/ViewGroup;->makeOptionalFitsSystemWindows()V (light greylist, reflection) I/WebViewFactory: Loading com.android.chrome version 80.0.3987.149 (code 398714932) E/o.ionic.starte: Invalid ID 0x00000000. E/o.ionic.starte: Invalid ID 0x00000000. I/cr_LibraryLoader: Loaded native library version number “80.0.3987.149” W/o.ionic.starte: Accessing hidden method Landroid/content/Context;->bindServiceAsUser(Landroid/content/Intent;Landroid/content/ServiceConnection;ILandroid/os/Handler;Landroid/os/UserHandle;)Z (light greylist, reflection) D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/Capacitor: Starting BridgeActivity D/Capacitor: Registering plugin: App D/Capacitor: Registering plugin: Accessibility D/Capacitor: Registering plugin: BackgroundTask D/Capacitor: Registering plugin: Browser D/Capacitor: Registering plugin: Camera D/Capacitor: Registering plugin: Clipboard D/Capacitor: Registering plugin: Device D/Capacitor: Registering plugin: LocalNotifications D/Capacitor: Registering plugin: Filesystem D/Capacitor: Registering plugin: Geolocation D/Capacitor: Registering plugin: Haptics D/Capacitor: Registering plugin: Keyboard D/Capacitor: Registering plugin: Modals D/Capacitor: Registering plugin: Network D/Capacitor: Registering plugin: Permissions D/Capacitor: Registering plugin: Photos D/Capacitor: Registering plugin: PushNotifications D/Capacitor: Registering plugin: Share D/Capacitor: Registering plugin: SplashScreen D/Capacitor: Registering plugin: StatusBar D/Capacitor: Registering plugin: Storage D/Capacitor: Registering plugin: Toast D/Capacitor: Registering plugin: WebView E/Capacitor: Unable to read file at path public/plugins D/Capacitor: Loading app at http://localhost W/o.ionic.starte: Accessing hidden method Landroid/media/AudioManager;->getOutputLatency(I)I (light greylist, reflection) W/cr_media: Requires BLUETOOTH permission I/ConfigStore: android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasWideColorDisplay retrieved: 0 android::hardware::configstore::V1_0::ISurfaceFlingerConfigs::hasHDRDisplay retrieved: 0 W/AudioCapabilities: Unsupported mime audio/ac4 W/AudioCapabilities: Unsupported mime audio/x-ima W/AudioCapabilities: Unsupported mime audio/x-ape W/AudioCapabilities: Unsupported mime audio/eac3-joc W/AudioCapabilities: Unsupported mime audio/mpeg-L1 Unsupported mime audio/mpeg-L2 W/AudioCapabilities: Unsupported mime audio/x-ms-wma D/Capacitor/Plugin/LN: LocalNotification received: null Activity started without notification attached D/Capacitor: App started D/Capacitor/Plugin/App: Firing change: true W/VideoCapabilities: Unrecognized profile 4 for video/hevc V/Capacitor/Plugin/App: Notifying listeners for event appStateChange D/Capacitor/Plugin/App: No listeners found for event appStateChange W/VideoCapabilities: Unsupported mime video/mp43 W/VideoCapabilities: Unrecognized profile/level 1/32 for video/mp4v-es Unrecognized profile/level 32768/2 for video/mp4v-es Unrecognized profile/level 32768/64 for video/mp4v-es D/Capacitor: App resumed W/VideoCapabilities: Unsupported mime video/wvc1 D/OpenGLRenderer: Skia GL Pipeline W/VideoCapabilities: Unsupported mime video/wvc1 D/EmergencyMode: [EmergencyManager] android createPackageContext successful D/InputTransport: Input channel constructed: fd=133 D/ViewRootImpl@edef802[MainActivity]: setView = DecorView@80c6513[MainActivity] TM=true MM=false W/VideoCapabilities: Unsupported mime video/x-ms-wmv7 W/VideoCapabilities: Unsupported mime video/x-ms-wmv8 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/ConnectivityManager: requestNetwork; CallingUid : 10651, CallingPid : 29347 D/Capacitor: Handling local request: http://localhost/ I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es D/ViewRootImpl@edef802[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@edef802[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493862674432} changed=true I/OpenGLRenderer: Initialized EGL, version 1.4 D/OpenGLRenderer: Swap behavior 2 D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000 D/OpenGLRenderer: eglCreateWindowSurface = 0x72f5333200, 0x72fc826010 D/InputTransport: Input channel constructed: fd=146 D/ViewRootImpl@528b903[MainActivity]: setView = android.widget.ImageView{607e080 V.ED… …ID 0,0-0,0} TM=true MM=false D/InputTransport: Input channel constructed: fd=147 D/ViewRootImpl@84a84ac[MainActivity]: setView = android.widget.ProgressBar{52f1575 I.ED… …ID 0,0-0,0} TM=true MM=false V/Capacitor/Plugin/Network: Notifying listeners for event networkStatusChange D/Capacitor/Plugin/Network: No listeners found for event networkStatusChange D/ViewRootImpl@edef802[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1 MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=148 D/ViewRootImpl@528b903[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x7 surface={valid=true 493740634112} changed=true D/mali_winsys: EGLint new_window_surface(egl_winsys_display *, void *, EGLSurface, EGLConfig, egl_winsys_surface **, EGLBoolean) returns 0x3000 D/OpenGLRenderer: eglCreateWindowSurface = 0x72f541f280, 0x72f53c3010 D/ViewRootImpl@84a84ac[MainActivity]: dispatchAttachedToWindow D/ViewRootImpl@84a84ac[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[477,1047][603,1173] result=0x1 surface={valid=false 0} changed=false D/ViewRootImpl@528b903[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220} getNavigationBarColor this view is not DecorView or null getNavigationBarColor() Fail D/InputMethodManager: prepareNavigationBarInfo() android.widget.ImageView{607e080 V.ED… …ID 0,0-1080,2220} getNavigationBarColor this view is not DecorView or null getNavigationBarColor() Fail V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor Fail mIsGetNaviBarColorSuccess false , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=152 W/InputMethodManager: Ignoring onBind: cur seq=43450, given seq=43449 D/InputTransport: Input channel destroyed: fd=148 D/ViewRootImpl@528b903[MainActivity]: MSG_RESIZED: frame=Rect(0, 0 - 1080, 2220) ci=Rect(0, 63 - 0, 39) vi=Rect(0, 63 - 0, 39) or=1 D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 0 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/Capacitor: Handling local request: http://localhost/polyfills-es2015.js D/Capacitor: Handling local request: http://localhost/runtime-es2015.js D/Capacitor: Handling local request: http://localhost/vendor-es2015.js D/Capacitor: Handling local request: http://localhost/main-es2015.js D/Capacitor: Handling local request: http://localhost/styles-es2015.js I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 69837 - Msg: Angular is running in the development mode. Call enableProdMode() to enable the production mode. D/Capacitor: Handling local request: http://localhost/5-es2015.js D/Capacitor: Handling local request: http://localhost/common-es2015.js D/Capacitor: Handling local request: http://localhost/home-home-module-es2015.js I/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 117994 - Msg: Ionic Native: deviceready event fired after 506 ms W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed. File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’ W/Capacitor/Console: File: http://localhost/vendor-es2015.js - Line 118299 - Msg: Native: tried calling SplashScreen.hide, but the SplashScreen plugin is not installed. File: http://localhost/vendor-es2015.js - Line 118311 - Msg: Install the SplashScreen plugin: ‘ionic cordova plugin add cordova-plugin-splashscreen’ D/Capacitor: Handling local request: http://localhost/swipe-back-d2cdbf9a-js-es2015.js V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075709, pluginId: Geolocation, methodName: getCurrentPosition V/Capacitor: callback: 125075709, pluginId: Geolocation, methodName: getCurrentPosition, methodData: {} D/Capacitor: Handling local request: http://localhost/tap-click-606f325e-js-es2015.js V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075710, pluginId: App, methodName: addListener V/Capacitor: callback: 125075710, pluginId: App, methodName: addListener, methodData: {“eventName”:“backButton”} D/Capacitor: Handling local request: http://localhost/focus-visible-70713a0c-js-es2015.js D/Capacitor: Handling local request: http://localhost/status-tap-2ec46489-js-es2015.js D/Capacitor: Handling local request: http://localhost/assets/icon/favicon.png D/TcpOptimizer: TcpOptimizer-ON D/NetworkSecurityConfig: No Network Security Config specified, using platform default V/Capacitor/Plugin: To native (Capacitor plugin): callbackId: 125075711, pluginId: Geolocation, methodName: watchPosition V/Capacitor: callback: 125075711, pluginId: Geolocation, methodName: watchPosition, methodData: {} I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2796 - Msg: new position: 51.9294869-8.5130874 D/Capacitor: Handling local request: http://localhost/33-es2015.js D/Capacitor: SplashScreen was automatically hidden after the launch timeout. You should call SplashScreen.hide() as soon as your web app is loaded (or increase the timeout).Read more at https://capacitor.ionicframework.com/docs/apis/splash-screen/#hiding-the-splash-screen W/libEGL: EGLNativeWindowType 0x72f53c3010 disconnect failed D/OpenGLRenderer: eglDestroySurface = 0x72f541f280, 0x72f53c3000 D/ViewRootImpl@528b903[MainActivity]: Relayout returned: old=[0,0][1080,2220] new=[0,0][1080,2220] result=0x5 surface={valid=false 0} changed=true D/ViewRootImpl@528b903[MainActivity]: dispatchDetachedFromWindow Surface release. android.view.ViewRootImpl.doDie:7954 android.view.ViewRootImpl$ViewRootHandler.handleMessage:4955 android.os.Handler.dispatchMessage:106 android.os.Looper.loop:214 android.app.ActivityThread.main:6986 java.lang.reflect.Method.invoke:-2 com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run:494 com.android.internal.os.ZygoteInit.main:1445 D/InputTransport: Input channel destroyed: fd=146 E/ViewRootImpl: sendUserActionEvent() returned. D/ViewRootImpl@edef802[MainActivity]: MSG_WINDOW_FOCUS_CHANGED 1 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=149 D/InputTransport: Input channel destroyed: fd=152 E/Capacitor/Console: File: https://maps.googleapis.com/maps/api/js?key=AIzaSyDfdy3Tu2pS2QX8m8f_iPPKfX4vgQHBel8 - Line 55 - Msg: You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started D/ViewRootImpl@edef802[MainActivity]: ViewPostIme pointer 0 D/ViewRootImpl@edef802[MainActivity]: ViewPostIme pointer 1 D/InputMethodManager: prepareNavigationBarInfo() DecorView@80c6513[MainActivity] getNavigationBarColor() -855310 V/InputMethodManager: Starting input: tba=io.ionic.starter ic=null mNaviBarColor -855310 mIsGetNaviBarColorSuccess true , NavVisible : true , NavTrans : false D/InputMethodManager: startInputInner - Id : 0 I/InputMethodManager: startInputInner - mService.startInputOrWindowGainedFocus D/InputTransport: Input channel constructed: fd=197 D/InputTransport: Input channel destroyed: fd=149 D/InputMethodManager: HSIFW - flag : 0 Pid : 29347 I/o.ionic.starte: Compiler allocated 4MB to compile void android.view.ViewRootImpl.performTraversals() I/Capacitor/Console: File: http://localhost/home-home-module-es2015.js - Line 2796 - Msg: new position: 51.9294876-8.5130852

Posts: 1

Participants: 1

Read full topic