Space on top of the google map

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!

I’ve added the next code to check if this was coming from padding or margin but no changes.

* {
  padding: 0;
  margin: 0;

  --padding-bottom: 0;
  --padding-end: 0;
  --padding-start: 0;
  --padding-top: 0;

  --margin-bottom: 0;
  --margin-end: 0;
  --margin-start: 0;
  --margin-top: 0;

}

Any idea ?

use the inspector and target the map. go down the tags and see which one you can set the css in. Something is giving it that extra padding at the top.

Thanks for the reply I’ve checked but seen nothing that can make this extra padding.
And If it’s a CSS thing why this isn’t appended each time I load the map?

On another project, I duplicated the code inside a tab page and the padding wasn’t showing at all.
So I don’t understand why this happens when It’s not a tab page.

Here you can see all the styles inside the google-map element.

So after trying things for three days I have found out that I need to create the map after the component routing to has finished animating.

To resolve the issue I have changed the onIonViewWillEnter to onIonViewDidEnter!

onIonViewDidEnter