capacitor-community / google-maps

Capacitor Plugin using native Google Maps SDK for Android and iOS.

Home Page:https://capacitor-community.github.io/google-maps/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ionic + googlemaps native + displaying issue

swidersky opened this issue · comments

Describe the bug
Hello,
When i create html element for map and later create map from code, the map which appears is in front of other UI elements.
When change map html element for z-index: 0 it still looks like the map is in foreground and it breaks UI.

Expected behavior
I should be able to display map and have options that menu will be in front of instead of map

commented

Describe the bug Hello, When i create html element for map and later create map from code, the map which appears is in front of other UI elements. When change map html element for z-index: 0 it still looks like the map is in foreground and it breaks UI.

Expected behavior I should be able to display map and have options that menu will be in front of instead of map

// mymap.page.html
<ion-content [fullscreen]="true" scroll="false">
  <div id="map" #map></div>
</ion-content>
<ion-fab vertical="top" horizontal="start" slot="fixed" style="margin-top: 50px;">
  <ion-fab-button color="danger" size="small" (click)="myPopoverDialog()">
    <ion-icon name="timer-outline"></ion-icon>
  </ion-fab-button>
</ion-fab>


// mymap.page.scss
#map {
  height: 100vh;
}

Place ion-fab ouside ion-content.

commented

Did you eventually succeed in making your webview transparent?