Google map not showing up inside ion-content!

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.
This map works fine if i don’t surround it with ion-content tag but since i add it the map disappear.

I want to use the ion-content tag cause i have an ion-header with a back button and if i don’t use the ion-content tag the button isn’t trigger when i click on it, cause the map is in background and interpret this event by an action on the map.

Here I show you the map working without ion-content tag.

<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>

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

  </ion-page>

image
image1080×2400 206 KB

Here you have the result with the ion-content:

<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>
      <capacitor-google-map :id="mapID"></capacitor-google-map>
    </ion-content>
  </ion-page>

image
image1080×2400 25.5 KB

I can see in the log that the map is successfully created, i have no errors on any console.

Here is a sample of my code.

<script setup>

import {
  IonHeader,
  IonContent,
  IonTitle,
  IonToolbar,
  IonButtons,
  IonBackButton,
  IonPage,
  onIonViewWillEnter,
} from '@ionic/vue';
import { GoogleMap } from '@capacitor/google-maps';

const mapID = 'mapPage';
const apiKey = process.env.VUE_APP_GOOGLE_MAPS_API;

onIonViewWillEnter(() => {
    mapInit(mapID);
})

async function mapInit(mapID) {
      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,
        },
      });
    }


</script>

<template>


<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>
      <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%;
}

ion-content {
  --background: transparent !important;
}

</style>

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

2

Did you make ion-content background transparent?

ion-content {
  --background: transparent;
}
3

Thank for the reply, that the first thing that I’ve tried but without success ! :frowning:

4

I think the proper way to make the ion-content background transparent is:

  ion-content::part(background) {
    background-color: transparent;
  }

See the docs here: ion-content: Scrollable CSS Component for Ionic App Content Areas

5

Thanks but still no change.

6

So after recreating a new project I discover that the error was coming from my dependencies.
I’ve just upgrade them and now it 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"
  },
2 Likes