Map does not display on 2nd opening - numerous conditions

[liquidcms]

I have been racking my brain trying to figure this out; but i think i have now narrowed it down to a specific set of conditions and a bug in your MapsComponent or the Ionic plugin. Please try to repeat:

• with a clean install of your starter app, run ionic serve
• rather than go through the walkthrough, start on certain page. for example, enter http://localhost:8100/video-playlist in the browser address bar.
• then from the menu button, select Maps page -> map shows correctly
• now, from the menu button, go back to video-playlist
• then use the menu to go back to the Maps page again -> this time you likely only see the menu button, title bar, map Geo-locator button.

NOTE: this only happens when in mobile emulation mode in Chrome or on a real device. It does not happen in Firefox, even when in mobile emulation mode.

NOTE: you can't do your app on a real device to show this as I think the test has to start on the page you return to after the map page - and your app starts on walkthrough; which you can not then return to. But if you change your app to set the video-plylist or categories or something else as the start; you should see it on a real device.

[djabif]

Thanks for reporting this. I was able to reproduce it.
Will work on a fix ASAP.

[liquidcms]

Another way to go would be this: https://github.com/ionic-team/ionic-native-google-maps

It doesn't have the bug that I reported here plus has the advantage of being able to work offline.

That being said, both the native plugin and the js api you are using seem to have very poor accuracy. I'm going to do some more testing tomorrow and bring it up with the maintainer of the native plugin.

[agustinhaller]

Hi @liquidcms !
Can you please check what version of Chrome are you using in your tests?
I have just replay the steps you mentioned above in Chrome 84 both with the demo template and a fresh install in my local machine and couldn't reproduce the issue :(

Here's a screen recording of my test:
Screen Recording 2020-08-14 at 12.03.31.mov.zip

I'm starting to feel this issue may be related to the Chrome renderer (as you also mention it doesn't happen in Firefox).

Regarding moving from the javascript SDK to the cordova plugin, for what I have been reading and researching, there's no proper support for the Google Maps native SDK in both Android and iOS with Capacitor yet (although it seems to be an ongoing implementation).
In our last update for ionic 5 Starter App, we ditch Cordova in favour of Capacitor as we feel it is going to be the way forward.
Having said that, I think we may wait until the cordova-plugin-googlemaps properly support Capacitor to add a native Google Map to the template.
In the meantime, the javascript SDK for Google Maps should work in every platform.

[liquidcms]

I can't tell from your video that you are in Chrome mobile emulation mode. But also, this happens on a real Android device as well. Although, I mentioned I am no longer using that plugin; or the one i mentioned - as neither provide reasonable accuracy (both provide about 20m accuracy which is pretty bad).

Thanks for looking into this.