Hi!
I have an app using ionic with vuejs and i add in my project a page with a map using the @capacitor/google-maps plugin.
So I’ve create an app with the default tabs template and I add a button that redirect to a view that’s have a header and a map. The problem is that on the top of this map there’s a blank space that appear, sometimes it doesn’t appear at first but if I close and open a second time the space appear.
It’s only appear on Android.
I’ve update my project to Ionic 6.20.8 and the error is still here, see my config :
Package.json
{
"name": "test",
"version": "0.0.1",
"private": true,
"scripts": {
"ionic:build": "vue-cli-service build",
"ionic:serve": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@capacitor/android": "^4.6.1",
"@capacitor/core": "4.6.1",
"@capacitor/google-maps": "^4.3.2",
"@capacitor/haptics": "4.1.0",
"@capacitor/keyboard": "4.1.0",
"@capacitor/status-bar": "4.1.1",
"@ionic/vue": "^6.4.2",
"@ionic/vue-router": "^6.4.2",
"core-js": "^3.6.5",
"ionicons": "^6.0.3",
"vue": "^3.2.45",
"vue-router": "^4.1.6"
},
"devDependencies": {
"@capacitor/cli": "4.6.1",
"@types/jest": "^27.0.2",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",
"@vue/cli-plugin-babel": "~5.0.0-rc.1",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"@vue/cli-plugin-eslint": "~5.0.0-rc.1",
"@vue/cli-plugin-router": "~5.0.0-rc.1",
"@vue/cli-plugin-typescript": "~5.0.0-rc.1",
"@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"@vue/cli-service": "~5.0.0-rc.1",
"@vue/eslint-config-typescript": "^11.0.2",
"@vue/test-utils": "^2.0.0-rc.16",
"@vue/vue3-jest": "^27.0.0-alpha.3",
"babel-jest": "^27.3.1",
"cypress": "^8.7.0",
"eslint": "^8.4.1",
"eslint-plugin-vue": "^9.8.0",
"jest": "^27.3.1",
"ts-jest": "^27.0.7",
"typescript": "^4.3.5"
},
"description": "An Ionic project"
}
To create the error create a blank project, add a new view with a map.vue file, then add a button inside the home page.
<ion-button :router-link="'/map'" > test </ion-button>
Add new route inside index.ts to your map.vue file.
{
path: '/map',
component: () => import('@/views/map.vue')
},
In map.vue file add the next code, this will generate a map, then change the map api key.
<script setup>
import {
IonHeader,
IonContent,
IonTitle,
IonToolbar,
IonButtons,
IonBackButton,
IonPage,
onIonViewWillEnter,
onIonViewWillLeave
} from '@ionic/vue';
import { GoogleMap } from '@capacitor/google-maps';
const mapID = 'mapPage';
const apiKey = 'YOUR_API_KEY';
let map = null;
onIonViewWillEnter( async () => {
map = await GoogleMap.create({
id: mapID,
element: document.getElementById(mapID),
apiKey: apiKey,
config: {
center: {
lat: 33.6,
lng: -117.9,
},
zoom: 13,
disableDefaultUI: true,
clickableIcons: false,
},
});
})
onIonViewWillLeave(() => {
if (map) {
map.destroy();
}
})
</script>
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button default-href="/tabs/home" text="" color="primary"></ion-back-button>
</ion-buttons>
<ion-title>Map</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="map__content">
<capacitor-google-map :id="mapID"></capacitor-google-map>
</ion-content>
</ion-page>
</template>
<style scoped>
capacitor-google-map {
display: inline-block;
width: 100%;
height: 100%;
}
.map__content {
--background: transparent !important;
}
</style>
Someone have any idea from where this error came from ?
Thanks for your help!
