search

ionic-team / ionic-native-google-maps

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

Maps works fine on browser but not rendered on real devices or simulators unless if map is not in <ion-content> #302

Closed ersenk closed 4 years ago

ersenk commented 4 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) card.io.cordova.mobilesdk 2.1.0 "CardIO" com-sarriaroman-photoviewer 1.2.4 "PhotoViewer" com.googlemaps.ios 3.5.0 "Google Maps SDK for iOS" com.paypal.cordova.mobilesdk 3.5.0 "PayPalMobile" cordova-plugin-add-swift-support 2.0.2 "AddSwiftSupport" cordova-plugin-advanced-http 2.1.1 "Advanced HTTP plugin" cordova-plugin-app-version 0.1.9 "AppVersion" cordova-plugin-background-geolocation 3.1.0 "CDVBackgroundGeolocation" cordova-plugin-badge 0.8.8 "Badge" cordova-plugin-device 2.0.3 "Device" cordova-plugin-email-composer 0.9.2 "EmailComposer" cordova-plugin-file 6.0.2 "File" cordova-plugin-geolocation 4.0.2 "Geolocation" cordova-plugin-google-analytics 1.8.6 "Google Universal Analytics Plugin" cordova-plugin-googlemaps 2.7.0-20200330-2338 "cordova-plugin-googlemaps" cordova-plugin-inappbrowser 3.1.0 "InAppBrowser" cordova-plugin-ionic-keyboard 2.2.0 "cordova-plugin-ionic-keyboard" cordova-plugin-ionic-webview 4.1.2 "cordova-plugin-ionic-webview" cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification" cordova-plugin-native-spinner 1.1.3 "Native Spinner" cordova-plugin-nativegeocoder 3.2.2 "NativeGeocoder" cordova-plugin-network-information 2.0.2 "Network Information" cordova-plugin-request-location-accuracy 2.3.0 "Request Location Accuracy" cordova-plugin-splashscreen 5.0.3 "Splashscreen" cordova-plugin-statusbar 2.4.3 "StatusBar" cordova-plugin-stripe 1.5.3 "cordova-plugin-stripe" cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser" cordova-plugin-whitelist 1.3.4 "Whitelist" cordova-plugin-x-socialsharing 5.4.7 "SocialSharing" cordova.plugins.diagnostic 5.0.1 "Diagnostic" es6-promise-plugin 4.2.2 "Promise" onesignal-cordova-plugin 2.7.0 "OneSignal Push Notifications"

Hi. native google maps work very fine on browser but not rendered on real devices.

If I move the map out of " ion-content" it is rendered. but then if I scroll down, the map stays there as a fixed component.

So basically, why native google maps not working in "ion-content" tags? Does anyone know the solution?

wf9a5m75 commented 4 years ago

If you put a map on dialog, you can't display the map. Map is under <HTML> tag. https://github.com/mapsplugin/cordova-plugin-googlemaps#how-does-this-plugin-work-android-ios

ersenk commented 4 years ago

So, what does it mean? I see tutorials and examples and they all are in ion content. but mine is not working as the way examples work

wf9a5m75 commented 4 years ago

Please put your code on a GitHub repository. I can check your code

ersenk commented 4 years ago

I've uploaded some files here: https://github.com/ersenk/ordermap it was too big so, i had to delete some files. I hope you do not need to run the app in your machine. If so, I can upload whole project anyways

here is my workflow: User runs the app. If his location service is open, the app gets his location and finds the closest branch of the company. If the closest branch is close enough, renders the map on app banner as one more slider

app main page is under homepages directory. Sliders are component and the map is under components/banner directory.

So, if I place the "app-banner" component upon "ion-content" in homepage, the map is rendered. but if I place the "app-banner" inside "ion-content" of homepage, the map is not rendered.

wf9a5m75 commented 4 years ago

Thank you, but I can't open zip file on my Android. I'm super busy. I don't have enough time to run your code at all. I just check your code what the problem is. Please put your code files, not zip file

ersenk commented 4 years ago

Hi. I've uploaded giles to this repository. Hopefully all files you need are here. Please let me know https://github.com/ersenk/orderwithmap

wf9a5m75 commented 4 years ago

Thank you. Yeah, you need to <app-banner></app-banner> inside <ion-content>

ersenk commented 4 years ago

that's the point. The map is rendered this way but when I scroll down on the home page app-banner stays fixed and it looks ugly.

When I place app-banner inside ion-content the map is not rendered. I do not know the reason and This is what I am asking

wf9a5m75 commented 4 years ago

Please use "as-is".

ersenk commented 4 years ago

Oh you must be kidding? I'm looking for an answer to why native maps not working inside ion-content.

wf9a5m75 commented 4 years ago

Because Map is not a HTML element.

wf9a5m75 commented 4 years ago

I think you just want to fix the map (banner) at top of the screen, correct? You can use position: fix css.