search

ionic-team / ionic-native-google-maps

Google maps plugin for Ionic Native
Other
221 stars 125 forks source link

Inner scroll element background is behind map canvas #186

Closed mcastets closed 5 years ago

mcastets commented 5 years ago

I'm submitting a ... (check one with "x")

If you choose 'problem or bug report', please select OS: (check one with "x")

cordova information: (run $> cordova plugin list) 

cordova-plugin-device 2.0.2 "Device"
cordova-plugin-googlemaps 2.5.2-beta-20190228-1054 "cordova-plugin-googlemaps"
cordova-plugin-ionic-webview 4.0.0 "cordova-plugin-ionic-webview"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 3.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"

If you use @ionic-native/google-maps, please tell the package.json (only @ionic-native/core and @ionic-native/google-maps are fine mostly)

"@ionic-native/core": "5.2.0",
"@ionic-native/google-maps": "5.0.0-beta.27"

Current behavior: Map is not showing neither on Android nor iOS. Height and width are fixed and greater than 200px. This is exactly the same issue as https://github.com/ionic-team/ionic/issues/16284 and using multiple maps branch didn't fix the problem

Expected behavior: Map should be displayed

Screen capture or video record:

Problem: https://pasteboard.co/I3TmnJR.png

Problem fixed when setting manually background to transparent: https://pasteboard.co/I3TmvQT.png

Related code, data or error log (please format your code or data):

#map_canvas {
  width: 90%;
  height: 80%;
  border: 1px solid red;
}
<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>
            Home
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>
    <a class="sourcecode" href="https://github.com/mapsplugin/ionic-googlemaps-quickdemo-v4/blob/master/src/app/home/home.page.ts" target="_blank">[source code]</a>
    <h3>Ionic GoogleMaps Demo</h3>
    <p>
        The <a href="https://github.com/ionic-team/ionic-native-google-maps">@ionic-native/google-maps</a> plugin and the <a href="https://github.com/mapsplugin/cordova-plugin-googlemaps" target="_blank">cordova-plugin-googlemaps</a> are able to display Google Maps in your Cordova application.
        One source code, then run it browser, Android and iOS!
    </p>
    <div id="map_canvas">
        <ion-button ion-button (click)="startNewCharge()">Demo</ion-button>
    </div>
</ion-content>
wf9a5m75 commented 5 years ago

In order to reproduce your issue, please share the project files on github repo. I will do git clone, npm i, ionic cordova prepare, then ionic cordova run android/ios.

mcastets commented 5 years ago

Wow, by trying to reproduce the issue I figure out we had a background-color set globally on ion-content...

Removing it fixed it.

Sorry for the inconvenience