GoogleMaps Bad Performance in Android Black Screen in iOS

Ionic Native
1

Hello… im facing error with @ionic-native/googlemaps in android… when i scroll the page on android 6.0 the map still in the sam position until i release the finger to scroll, then the map rellocated into the correct position… algo when i have transition back the page content overlaps with the previous page until the animation back’s ends.

[10:58]
This is my ionic info

[10:58]
cli packages: (/usr/local/lib/node_modules)

@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.0
Cordova Platforms : android 6.3.0 ios 4.5.4
Ionic Framework : ionic-angular 3.9.2

System:

Android SDK Tools : 26.0.2
Node : v6.9.1
npm : 3.10.8
OS : macOS High Sierra
Xcode : Xcode 9.1 Build version 9B55

plugin version and use develop version

the map it is not in a full page fill width: 100px and height 200px;

and for iOS when the page is open, the app comes all page in black, for this reason i follow this instructions but the maps still appears with black screen.

2

Please share your project files on github, otherwise, nobody can not help you.

3

https://bitbucket.org/snakepit13/mardelplata

4

Thank you for sharing your project.
I have been inspecting it.

I let you know one thing that the reason of icon of marker is not loaded is the specified path is wrong.

Since you display the page on file:///android_asset/www/index.html , you should specify assets/images/icons8-Marker-64.png

58 PM

1 Like
5

The reason of you can not touch on the map is bug of the maps plugin. (because ionic has too much complex.)

Please wait for a while.

6

@wf9a5m75, Is that bug just in Android? I have an app I made with your plugin installed on my iOS phone right now and I don’t have that problem…

7

@snakepit, I am posting an scss file for my MapPage. You can ignore most of it, but the first item is important. Notice that it is before the scss reference for the page itself. This may help if you’re still having trouble after following @wf9a5m75 ‘s advice

ion-app._gmaps_cdv_ .nav-decor {
    background-color: transparent !important;
}
.pac-container {
    display: none !important;
}

.item-ios {
    font-size: 1.4rem;
}

page-map {
 
    .flex-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .map-container {
        height: 100%;

     }
  
     #map {
        height: 100%;
        width: 100%;
    }
    
}
8

@snakepit Please reinstall the maps plugin from the multiple_maps branch.
This is the screen record on iPhone SE.

bad_performance_compress

By the way, I have never experienced your this description.

when the page is open, the app comes all page in black

9

I think

Is fixed by adding this

10

thanks @jaydz and @wf9a5m75 both comments fix my problems, using the css and installing plugin from multiple_maps branch

Thanks again!

1 Like
11

———-Happy to help———-