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

[JeongJun-Lee]

I'm submitting a ... (check one with "x")

• [ ] question
• [x] any problem or bug report
• [ ] feature request

If you choose 'problem or bug report', please select OS: (check one with "x")

• [x] Android
• [ ] iOS
• [ ] Browser

cordova information: (run $> cordova plugin list)

insert the output from the command here

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": "4.14.0", "@ionic-native/google-maps": "^4.21.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/mapsplugin/cordova-plugin-googlemaps/issues/2396

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):

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]

Please share your project files on GitHub repository.

[JeongJun-Lee]

https://github.com/JeongJun-Lee/ionic3-gmap-overlay

[wf9a5m75]

ping

[JeongJun-Lee]

@wf9a5m75 I already shared my repo. Still I can't solve this issue. Could you give a comment to solve it?

[wf9a5m75]

Sorry for long waiting. I was busy.

I checked your code. First, you specify "assets/tiles/" + zoom + "/" + x + "/" + y + ".png", https://github.com/JeongJun-Lee/ionic3-gmap-overlay/blob/master/src/pages/map/map.ts#L56

but there is no file at https://github.com/JeongJun-Lee/ionic3-gmap-overlay/tree/master/src/assets

Please example tile files.

[JeongJun-Lee]

Thank you for you help even though you're busy.

I pushed the tiles just now.

[JeongJun-Lee]

This issue happens only at real device, not browser.

[wf9a5m75]

[wf9a5m75]

page-map {   <--- This should be `page-map` instead of `page-home`
  #map_canvas {
    height: 100%;
  }
}

https://github.com/JeongJun-Lee/ionic3-gmap-overlay/blob/a28e1cf4ad897a4de2e87c3bdae359cd12ef4abf/src/pages/map/map.scss

[wf9a5m75]

Also you should use addTileOverlaySync instead of addTileOverlay because you don't wait the MAP_READY event.

https://github.com/JeongJun-Lee/ionic3-gmap-overlay/blob/a28e1cf4ad897a4de2e87c3bdae359cd12ef4abf/src/pages/map/map.ts#L50-L58

[wf9a5m75]

I'm further inspecting.

[JeongJun-Lee]

Thank for your detail debugging. I changed page-home to page-map and to addTileOverlaySync also. But still shows blank.

[wf9a5m75]

Okay, I got the reason why your app can't display the tile images. Because the index.html is hosted on file: protocol. Most of cases, ionic runs on http: protocol. I tested a lot (maybe on http: protocol). That's why other people works. But for the code for file: does not work well with ionic3.

I changed this plugin's code. So, please reinstall cordova-plugin-googlemaps from the multiple_maps branch.

[JeongJun-Lee]

Wow thanks a lat. I am really happy. OK. it's last question. How can i get a branch(mutiple_maps) by npm install?

[wf9a5m75]

https://stackoverflow.com/a/49230481/697856

[JeongJun-Lee]

Oh. I am sorry, I have a still problem with the git branch. I think the branch was installed rightly. THen how can I debug more?

[JeongJun-Lee]

From Android device.

[wf9a5m75]

What are you asking?

[JeongJun-Lee]

Still I have same problem even though I reinstalled the plugin with multiple_maps branch which you require to reinstall.

[wf9a5m75]

Did you update your repo?

[JeongJun-Lee]

Yes, I updated my repo now.

[wf9a5m75]

Can you show me the output of cordova plugin list?

[JeongJun-Lee]

cordova-plugin-device 1.1.4 "Device" cordova-plugin-googlemaps 2.5.4-beta-20190416-1514 "cordova-plugin-googlemaps" cordova-plugin-ionic-webview 1.2.1 "cordova-plugin-ionic-webview" cordova-plugin-splashscreen 4.0.3 "Splashscreen" cordova-plugin-whitelist 1.3.1 "Whitelist" ionic-plugin-keyboard 2.2.1 "Keyboard"

[wf9a5m75]

Thanks. And also can you show me the output of cordova platform list?

[JeongJun-Lee]

installed platforms: android 6.3.0 browser 5.0.4

[wf9a5m75]

Yeah, the android platform is old.

[JeongJun-Lee]

Yes, I want to go forward @7 at least but fcm plugin requires old play-google-services 10.+

[wf9a5m75]

This plugin requires 15.1.0 or above. https://github.com/mapsplugin/cordova-plugin-googlemaps#install-optional-variables

[wf9a5m75]

I just cloned your repo, and run it.

[wf9a5m75]

Please try to reinstall the platform:

$> ionic cordova platform rm android
$> ionic cordova platform add android

[JeongJun-Lee]

I cannot build error below.

• What went wrong: Execution failed for task ':app:mergeDebugAssets'.

  unable to create new native thread

[wf9a5m75]

Please past (or link) to all log instead of two lines. I can't guess the reason with only two lines.

[JeongJun-Lee]

Running command: /Users/comseong/dev/ionic3/ionic3-gmap-overlay/platforms/android/gradlew cdvBuildDebug -b /Users/comseong/dev/ionic3/ionic3-gmap-overlay/platforms/android/build.gradle -Dorg.gradle.daemon=true -Dorg.gradle.jvmargs=-Xmx2048m

I thinsk I need to increase the-Dorg.gradle.jvmargs=-Xmx2048m to more bigger size. But I cannot find how to do it for cordova build.

[wf9a5m75]

The cordova-plugin-googlemaps v2.6.0 has been released, which fixes the original problem.

[JeongJun-Lee]

I succeeded finally the build by cordova-android 8.0 and cordova-plugin-googlemaps v2.6.0, but the map is not shown like before. It shows only blank screen. From which part could I debug it by break- point in the source code?

[JeongJun-Lee]

In Ionic4, I still have same problem so I opened new issue(https://github.com/ionic-team/ionic-native-google-maps/issues/215) with new repo.