Capacitor Google Map does not scroll along with rest of the content on Android

Ionic Framework
1

Hello,

I am using Ionic v7, NuxtJS 3, and Capacitor Google Map component. I embedded a Google Map into a simple page with some dummy content.

The issue I am facing is that when I scroll the page up, the content below the map starts to overlap the map.

maps
maps652×680 126 KB

I want the map to scroll along with the rest of the content. What am I doing wrong here? I would appreciate any feedback or suggestions.

Here is a brief view of my code:

<script setup>
import {
    IonPage,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonContent,
    IonButtons,
    IonButton,
    IonIcon,
    IonList,
    IonItem,
    IonLabel,
    IonGrid,
    IonRow,
    IonCol,
} from "@ionic/vue"
import { onMounted, ref } from "vue";
import { GoogleMap } from "@capacitor/google-maps";
import { Geolocation } from "@capacitor/geolocation";
import { chevronBack } from 'ionicons/icons';

const router = useRouter();
const mapElem = ref();
const googleMap = ref();

onMounted(async () => {
    await nextTick();
    setTimeout(() => {
        initMap();
    }, 2)
})

const initMap = async () => {
    const position = await Geolocation.getCurrentPosition({
        enableHighAccuracy: true,
    });

    const latLng = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
    };

    googleMap.value = await GoogleMap.create({
        id: "my-map",
        element: mapElem.value,
        apiKey: "AIzaSyC1SDpW1wKoNFDmmRZdivHAXNOk_VVeMAE",
        config: {
            center: latLng,
            zoom: 12,
        },
    });
};
</script>
<template>
    <ion-page>
        <ion-content class="ion-padding">
            <ion-grid>
                <ion-row>
                    <ion-col>
                        <capacitor-google-map ref="mapElem"></capacitor-google-map>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <ion-list>
                <ion-item>
                    <ion-label class="font-medium text-sm">Co Driver</ion-label>
                    Fusce egestas elit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">PO Number</ion-label>
                    Nam commodo suscipit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Trailer Unit</ion-label>
                    Curabitur a
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Load Number</ion-label>
                    Proin viverra
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Co Driver</ion-label>
                    Fusce egestas elit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">PO Number</ion-label>
                    Nam commodo suscipit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Trailer Unit</ion-label>
                    Curabitur a
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Load Number</ion-label>
                    Proin viverra
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Co Driver</ion-label>
                    Fusce egestas elit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">PO Number</ion-label>
                    Nam commodo suscipit
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Trailer Unit</ion-label>
                    Curabitur a
                </ion-item>
                <ion-item>
                    <ion-label class="font-medium text-sm">Load Number</ion-label>
                    Proin viverra
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-page>
</template>
<style scoped>
body {
    background: transparent;
}

ion-content {
    --background: none;
}

ion-row {
    --background: none;
}

ion-col {
    --background: none;
}

capacitor-google-map {
    display: block;
    width: 100%;
    height: 300px;
}
</style>
1 Like