@capacitor/google-maps could only be showed in PC but mobile devices

[mannok]

Bug Report

It is not related to IonContent Backgroud Color Problem

Plugin(s)

@capacitor/google-maps

Capacitor Version

Capacitor Doctor   

Latest Dependencies:

  @capacitor/cli: 4.0.1
  @capacitor/core: 4.0.1
  @capacitor/android: 4.0.1
  @capacitor/ios: 4.0.1

Installed Dependencies:

  @capacitor/cli: 4.0.1
  @capacitor/ios: 4.0.1
  @capacitor/android: 4.0.1
  @capacitor/core: 4.0.1

[success] Android looking great! 👌

Platform(s)

• Android
• Haven't tested in iOS

Current Behavior

The map could only be showed in PC Chrome. It is not even initialized and displayed in Android App.

Expected Behavior

The map can be showed as how PC Chrome displayed

Code Reproduction

https://github.com/mannok/capacitor-gmap-on-device-issue

Other Technical Details

PC Chrome: tag was initialized and content was inserted

Android Remote Debug: seems tag wasn't be modified, result CapacitorGoogleMaps.create (#69605420) showing undefined

AndroidManifest.xml

<?xml version='1.0' encoding='utf-8'?>
<manifest package="com.vueonic" xmlns:android="http://schemas.android.com/apk/res/android">
    <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name="com.vueonic.MainActivity" android:theme="@style/AppTheme.NoActionBarLaunch">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <provider android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true" android:name="androidx.core.content.FileProvider">
            <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" />
        </provider>
        <meta-data android:name="com.google.android.geo.API_KEY" android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
    </application>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-feature android:name="android.hardware.location.gps" />
</manifest>

Additional Context

[Ionitron]

This issue may need more information before it can be addressed. In particular, it will need a reliable Code Reproduction that demonstrates the issue.

Please see the Contributing Guide for how to create a Code Reproduction.

Thanks! Ionitron 💙

[mannok]

@jcesarmobile reproduction link https://github.com/mannok/capacitor-gmap-on-device-issue

Please do the following after clone

1. npm i
2. replace YOUR_API_KEY_HERE with valid Google API Key, 2 places needed to be update (AndroidManifest.xml, HomePage.vue)
3. ionic capacitor run android -l --external --live-reload

[CrackerakiUA]

I have similar issue also on ios, google maps is grey, markers are working but map is not in place and can't be moved. On android it's not even loading, very similar with @mannok Any info on this? Tested on several envs, similar issues, also some previous projects which was working, not working now with latest packages. Primary Environment:

[GEnAdInE]

Having the same issue , still no solution ?

[theproducer]

@GEnAdInE @mannok If you are using Vue and calling your map set up code within setup/onMounted: can you try wrapping your setup code in a timeout? For example:

setup: () => {
    onMounted(async () => {
      setTimeout(async () => { //... map code here }, 500)
   }
}

[SergenN]

I'm experiencing the same issue, made a new ionic tabs project (angular 14) and added the google map as per installation instructions and i end up with a not working map on IOS.

Any workaround for this issue?

[mahen23]

Can confirm this bug with latest version of Android Studio, "@capacitor/google-maps": "^1.1.0", and "@capacitor/core": "4.3.0",

[Dev-it-a-dev]

Using Angular, I had the same problem on Android platform. It couldn't load by simply calling the GoogleMap.create method. So I solved using some rxjs trick and angular hook.

I solved by:

1. Making sure the DOM element reference of the map is correctly loaded before doing anything else ( on Angular, using ngAfterViewInit lifecycle hook )
2. Setting a boolean flag to false, for when the map will be correctly loaded by the plugin ( I did it using an RxJs behaviorSubject ) flagMapLoaded= new BehaviorSubject<boolean>(false);
3. Actually creating the map and setting the flag to true only when the promise is successfull

CreateMap() {

    this.newMap = await GoogleMap.create(options).then( m => 
        {
          this.flagMapLoaded.next(true);  // <--- Setting the flag to true once we actually have the map
          return m;  // <--- Return the map and assigning it to 'this.newMap'
        });
 }

4. Waiting for the flag to be true by subscribing to it before managing the map using other methods (adding markers, changing map type, etc...)

FooModifyMap() {

    this.flagMapLoaded.pipe(
       filter( t => t !== false )  // <-- wait condition
     ).subcribe( async OK => 
          {
                 // Do stuff here
                 // .....
          });
}

[gbrits]

May help others - I had to enable the Maps SDK for iOS, Maps SDK for Android & Maps JavaScript API in my Google Console's libraries in order for the blank map to become a terrain map. Strangely with just JavaScript the map presented blank for me as per @SergenN's post.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.