I’m using Ionic 6, Cap 4 and the Google Maps plugin that ships with Cap 4. I’m trying to add Google Maps to a page with other content. I’m running into the problem with transparency as described in the documentation here. I’m wondering if there are any updates on fixes for that issue?
My page. What’s Nearby is where the map is supposed to be.
If I set the opacity on the root element on my page I see the map, but nothing else.
Is it possible to place the map on a page with other content?
Ionic Info
Ionic:
Ionic CLI : 6.20.1 (/Users/sean.wernimont/.nvm/versions/node/v16.16.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.1.9
@angular-devkit/build-angular : 14.2.4
@angular-devkit/schematics : 14.2.4
@angular/cli : 14.2.4
@ionic/angular-toolkit : 6.0.0
Capacitor:
Capacitor CLI : 4.0.1
@capacitor/android : 4.0.1
@capacitor/core : 4.0.1
@capacitor/ios : 4.0.1
Utility:
cordova-res : 0.15.4
native-run : 1.7.1
System:
NodeJS : v16.16.0 (/Users/sean.wernimont/.nvm/versions/node/v16.16.0/bin/node)
npm : 8.11.0
OS : macOS Monterey
What CSS are you changing to set the opacity?
I think using transparent background on these two elements should be enough without changing opacity.
ion-content {
--background: transparent;
}
body {
background: transparent;
}
just doing that didn’t work. what did (partially) work is
ion-content {
--background: transparent;
}
body {
background: transparent;
}
* {
background: transparent;
--background: transparent;
}
However now on Android now the map is partially visible but with tons of dead space above it. The map is just barely visible under the icons that are supposed to be in the footer.
Can you show the What’s Nearby page html and css? Would be easier to help you identify the issue.
I don’t know why but sometimes it works and sometimes it doesn’t. Is there another way besides setting the transparency? I’d rather not have to do a full UX regression on my app to find all the places that might have broken because I set the background to transparent in order to show a map.
Sometimes it’s like this, sometimes it’s correct and sometimes it doesn’t show at all.
It’s the same code. Just refreshing the page.
Here’s the HTML for the page.
SCSS
.map {
height: 330px;
display: flex;
flex-direction: column;
.header {
height: $ListItemHeight;
display: flex;
justify-content: space-between;
align-items: center;
background: $White;
.title {
font-weight: $BodyStrong;
font-size: $FontSizeNormal;
padding-left: $PaddingNormal;
}
.headerIcons {
display: flex;
align-items: center;
.tag {
padding-right: $PaddingNormal;
display: flex;
flex-direction: column;
color: $DarkBlue;
font-weight: $BodyStrong;
font-size: $FontSizeSmall_11;
align-items: center;
ion-icon {
&.on {
color: $Blue;
}
&.off {
color: $LightGray;
}
}
}
.location {
padding-right: $PaddingNormal;
ion-icon {
color: $Blue;
}
}
}
}
.footer {
display: flex;
height: $ListItemHeight;
background: $White;
.icons {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
div {
height: 36px;
width: 36px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
ion-icon {
color: $White;
}
&.companies, &.contacts, &.opportunities, &.projects {
border-radius: $BorderCircle;
font-size: $IconSizeLarge;
&.selected {
border: $BorderThickness solid $Blue;
box-shadow: 0px 0px 0px $BorderThickness_2 $White inset;
}
}
&.companies {
background-color: $Orange;
}
&.contacts {
background-color: $Yellow;
}
&.opportunities {
background-color: $Blue;
}
&.projects {
background-color: $DarkGreen;
}
}
}
}
.nearby {
height: 230px;
border: $BorderThickness solid $LightGray;
capacitor-google-map {
height: 100%;
width: 100%;
display: inline-block;
}
.loadingSpinner {
display: flex;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background: $White;
ion-spinner {
color: $Blue;
height: 50px;
width: 50px;
}
}
}
