Google-maps: After adding transparency all the way through...only have black empty space all around the map.

[askilondz]

Bug Report

Plugin(s)

@capacitor/google-maps

Platform(s)

Android

Current Behavior

Added transparency per docs to html, body ion-content and any other parent elements that the google-maps element is nested in. I can see the map. The issue is we are stuck with a solid black background around the map and no way to style the underlying divs because everything has to be transparent.

How else can we work around this so the map doesn't just look like it's floating on a black abyss of empty space?

[tafelnl]

You should probably just add elements (which then do have a background) around the area/div the map is displayed in. So you could add a header above it, a footer below it and just add some empty divs to the left and right

[matboccardo]

Hi, I have the same problem. Were you able to fix it? I'm using Vite 6, Capacitorjs 7 and ChakraUI V3. On the web I can see it fine, but on Android it looks like a floating map, and when I do the "destroy" my screen goes black.

Any ideas?

Code:
`import { useParams } from 'react-router-dom';
import { useEffect, useRef } from 'react';
import { GoogleMap } from '@capacitor/google-maps';
import { GOOGLE_API_KEY } from '@/apis';
import { Box } from '@chakra-ui/react';

const FarmDetails = () => {
const { id } = useParams<{ id: string }>();
const mapRef = useRef<HTMLElement | null>(null);
let map: GoogleMap | null = null;

useEffect(() => {
    async function loadMap() {
        if (!mapRef.current) return;

        map = await GoogleMap.create({
            id: 'farm-map',
            element: mapRef.current,
            apiKey: GOOGLE_API_KEY,
            config: {
                center: { lat: 37.422, lng: -122.084 },
                zoom: 14,
            },
        });

        await map.addPolygons([
            {
                paths: [
                    { lat: 37.422, lng: -122.084 },
                    { lat: 37.422, lng: -122.090 },
                    { lat: 37.428, lng: -122.090 },
                    { lat: 37.428, lng: -122.084 },
                ],
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2,
                fillColor: "#FF0000",
                fillOpacity: 0.3,
            },
        ]);
    }

    loadMap();

    return () => {
        if (map) {
            map.destroy();
        }
    };
}, []);

return (
    <Box>
        <h1>Detalles del Farm</h1>
        <p>ID: {id}</p>
        <capacitor-google-map
            id="map"
            ref={mapRef}
            style={{
                display: 'inline-block',
                width: '100%',
                height: '400px'
            }}
        />
        <a href="/farms">Volver a la lista</a>
    </Box>
);

};

export default FarmDetails;`