search

ionic-team / ionic-native-google-maps

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

swipe navigation error when map inside a page #218

Closed hartherbert closed 5 years ago

hartherbert 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-googlemaps 2.6.2 "cordova-plugin-googlemaps"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 4.0.1 "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"

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

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

Current behavior: When I navigate from my tab1-page to the map-page (is child page), it all looks fine. Then the native google map is rendered inside my <ion-card-content> in a <div>. All looks good, but when I try to swipe back to the search-page, several things happen

Expected behavior: When navigating back using a swipe (iOS) the map should

Screen capture or video record: swipebackerror (1)

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

This only happens if the map is in place. When I remove the map out of the page, the transition works fine.

This error seems to be related to this issue on the plugin page #2593

This has been tested on the simulator and on real devices. All of them fail the swipe navigation.

The person who share your project files on Github (or other git repository) is in faster lane than other people.
Please share your project files on Github or others(Bitbucket, Gitlabs...etc).
If you don't want to share your project files, please create a demo project, then share it.

Screen captures, and/or native logs(such as Logcat, xcode logs) are appreciate.

Giving much information, you are waiting time is less.
Thank you for your cooperation.

Git Repo

Here is a demo repo to demonstrate the error ionic-googlemaps-test

To run the project on a real device, please enter your own Google API keys inside the config.xml file 

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="(YOUR API KEY)" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="(YOUR API KEY)" />

After that simply run the project using ionic cordova run ios --target=iPhone-XS

wf9a5m75 commented 5 years ago

I don't recommend you use this plug-in in slide. Map is NOT a HTML element.

https://github.com/mapsplugin/cordova-plugin-googlemaps/blob/master/README.md#how-does-this-plugin-work-android-ios

hartherbert commented 5 years ago

I'm not using a slider, it's just the swipe back navigation. You can test the same behaviour with a map only page.

The map is not the problem, if you look at it, the map slides perfectly fine. It is just beeing overlayed by the previous page (the one being swiped back)

wf9a5m75 commented 5 years ago

Did you read and understand how this plugin work?

Since this plug-in displays the native map view under the browser, this plugin changes background of elements are transparent.