CODEWITHSUNDEEP
angulargoogle-mapsionic-frameworkcapacitor
Ariyan Ashfaque
Ariyan Ashfaque

Reputation: 129

Ionic capacitor google maps appears over WebView on IOS

Integrated @capacitor/google-maps plugin in an Ionic capacitor application. Plugin is working fine when running the application in browser or in android. But in iOS ionic header is not visible as the plugin renders the map over the WebView.

<ion-content [fullscreen]="true">
  <ion-toolbar class="tool" slot="fixed">
    <ion-icon
      class="back"
      name="arrow-back-circle"
      (click)="handleDismissMap()"
    ></ion-icon>
    <ion-button
      slot="end"
      shape="round"
      class="action-button"
      (click)="handleSaveLocation()"
    >
      <ion-icon slot="start" name="location-outline"></ion-icon>
      Save Location
    </ion-button>
  </ion-toolbar>
  <div id="container">
    <capacitor-google-maps id="map" #map></capacitor-google-maps>
  </div>
</ion-content>

ion-content {
  --background: none;
}

body {
  background: none;
}

#container {
  width: 100%;
  height: 100%;
}

capacitor-google-maps {
  width: 100%;
  height: 100%;
  display: inline-block;
}

ion-toolbar.tool {
  padding: 1rem;
  --background: transparent;

  ion-icon.back {
    color: #fff;
    font-size: 40px;
    margin: 0.4rem 1rem 0 0;
  }

  ion-button.action-button {
    color: #1d4370 !important;
    --color: #1d4370 !important;
    --background: #fff !important;
    font-family: "Gothom Medium" !important;
    ion-icon {
      color: #1d4370 !important;
    }
  }
}

Upvotes: 0

Views: 606

Answers (1)

Idrimi
Idrimi

Reputation: 1

I think the issue is the way capacitor google maps handles fullscreen. Just had the same problem as you.

capacitor-google-maps {
  width: 100%;
  height: 100%;
  display: inline-block;
}

If you scale it to a 100% / 100% it will toggle fullscreen. If you fake it beeing not fullscale it works. Here's a sample:

capacitor-google-map {
        display: inline-block;
        width: 100vw;
        height: 99.9vh;
        z-index: 1;
        position: absolute;
        top: 0;
        left:0;
      }

  .drawer{
    position: absolute;
    bottom:0;
    z-index: 2;
  }

Upvotes: 0

Related Questions