search

ionic-team / ionic-native-google-maps

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

Will be blank screen with TileOverlay in case the map page is loaded as a main page by lazy loading at Ionic4 #215

Closed JeongJun-Lee closed 5 years ago

JeongJun-Lee 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.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) "@ionic-native/core": "^5.0.0", "@ionic-native/google-maps": "^5.5.0",

Current behavior:

Will be blank screen with TileOverlay in case the map page is loaded as a main page by lazy loading This issue is similar to https://github.com/ionic-team/ionic-native-google-maps/issues/190

Expected behavior:

the map page is loaded as a main page by lazy loading should be seen well, not a blank.

Screen capture or video record:

Related code, data or error log (please format your code or data): https://github.com/JeongJun-Lee/ionic4-gmap-overlay

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.
wf9a5m75 commented 5 years ago

I checked your repo on my phone. I haven't tested it, but I guess you installed this plug-in with --variable GOOGLE_MAPS_ANDROID_API_KEY.

The specification way has been changed since v2.6.0. You need to define your API keys in config.xml file, not variable option.

JeongJun-Lee commented 5 years ago

I have already two lines like below

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="***" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="****" />

at https://github.com/JeongJun-Lee/ionic4-gmap-overlay/blob/master/config.xml

JeongJun-Lee commented 5 years ago

Found reasons:

  1. The blank screen was from wrong GOOGLE_MAPS_ANDROID_API_KEY value.
  2. Even though the right API_KEY was, the overlay images was not shown. So I changed the tile's URL to full path like "http://localhost/assets/tiles/13/5618/3163.png".

Finally it works well. But I suggest to show error logs at the case 1 or 2 in Browser console, because there was no error log, it was really hard to find the root causes.

Thanks.