Map not showing on Android ionic vue3 capacitor 7

[ambrooo]

Bug Report

The map is not showing on Android. On web and iOS work perfect. I even work on a blank project with just the @capacitor-google-maps plugin installed, followed all instruction from documentation, made the background transparent and still not showing. I tried all suggested solution that I found on github.

Plugin(s)

Capacitor Version

Latest Dependencies:

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

Installed Dependencies:

  @capacitor/ios: not installed
  @capacitor/core: 7.4.3
  @capacitor/cli: 7.4.3
  @capacitor/android: 7.4.3

[success] Android looking great! 👌

Platform(s)

Current Behavior

Expected Behavior

Code Reproduction

1. The app has just one view, the HomeView.vue:

<script lang="ts" setup>
import { IonButton} from '@ionic/vue';
import { ref, shallowRef, useTemplateRef } from 'vue'
import { GoogleMap } from '@capacitor/google-maps'

const mapRef = useTemplateRef<HTMLElement>('mapRef')
const newMap = shallowRef<GoogleMap>()

async function createMap() {
  if (!mapRef.value) return

  newMap.value = await GoogleMap.create({
    id: 'my-cool-map',
    element: mapRef.value,
    apiKey: import.meta.env.VITE_MAPS_API_KEY,
    config: {
      center: {
        lat: 33.6,
        lng: -117.9,
      },
      zoom: 8,
    },
  })
}
</script>

<template>

    <capacitor-google-map
        ref="mapRef"
        style="display: inline-block; width: 275px; height: 400px; background-color: transparent!important;"
    ></capacitor-google-map>

  <ion-button @click="createMap()">Create Map</ion-button>
</template>

2. Style.css:

html, body {
    background: transparent !important;
}

ion-content {
    --background: transparent;
}

3. AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest 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">

        <activity
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode|navigation"
            android:name=".MainActivity"
            android:label="@string/title_activity_main"
            android:theme="@style/AppTheme.NoActionBarLaunch"
            android:launchMode="singleTask"
            android:exported="true">

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <provider
            android:name="androidx.core.content.FileProvider"
            android:authorities="${applicationId}.fileprovider"
            android:exported="false"
            android:grantUriPermissions="true">
            <meta-data
                android:name="android.support.FILE_PROVIDER_PATHS"
                android:resource="@xml/file_paths"></meta-data>
        </provider>
    </application>

    <!-- Permissions -->

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <!-- Google Maps API KEY -->

    <meta-data android:name="com.google.android.geo.API_KEY" android:value="MY_API_KEY"/>
</manifest>

Other Technical Details

node v22.19.0

Additional Context

Web:

Android:

[mwagena]

this needs to be placed inside the application tag

<meta-data android:name="com.google.android.geo.API_KEY" android:value="MY_API_KEY"/>

[ambrooo]

this needs to be placed inside the tag

<meta-data android:name="com.google.android.geo.API_KEY" android:value="MY_API_KEY"/>

I'm sorry, which tag? I placed it under provider tag, but the result is the same.

[mwagena]

Inside the application tag

this needs to be placed inside the tag

<meta-data android:name="com.google.android.geo.API_KEY" android:value="MY_API_KEY"/>

I'm sorry, which tag? I placed it under provider tag, but the result is the same.

[ambrooo]

It works, thank you so much. I didn't find any instruction about where to place that tag.

[mwagena]

Ran into the same issue, logcat in Android studio pointed me in the right direction

It works, thank you so much. I didn't find any instruction about where to place that tag.

[ionitron-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.