Google map disappear when navigate

Ionic Framework Ionic Vue
1

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.
This problem only appear on android (not tested on IOS) and works fine on web.
So I have a map on a tab page when I first go to this tab the map loads and works find but if I change tabs and go back the map not showing up.

In my code I say that every time the page will be seen it create the map and when the page will be leave the map is removed.
In my log I can see this process without getting errors, the stranger things is that I use the same code in an other page (but not on tab) and it works perfectly fine on this page.

Here is a sample of my code.

<script setup>

import {
  IonPage,
  onIonViewWillEnter,
 onIonViewWillLeave
} from '@ionic/vue';
import { GoogleMap } from '@capacitor/google-maps';

const mapID = 'mapPage';
const apiKey = process.env.VUE_APP_GOOGLE_MAPS_API;
var map = null;

onIonViewWillEnter( async () => {
     this.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 (this.map) {
    this.map.destroy();
  }
})

</script>

<template>
  <ion-page>
      <capacitor-google-map :id="mapID"></capacitor-google-map>
  </ion-page>
</template>

Someone have any idea from where this error came from ?
Thanks for your help!

2

So after recreating a new project I discover that the error was coming from my dependencies.
I’ve just upgrade them and It’s now works !

"dependencies": {
    "@capacitor/android": "^4.6.1",
    "@capacitor/app": "4.1.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.0.0",
    "@ionic/vue-router": "^6.0.0",
    "core-js": "^3.6.5",
    "ionicons": "^6.0.3",
    "vue": "^3.2.21",
    "vue-router": "^4.0.12"
  },
1 Like