developers

    Forum Stats

  • 3,874,062 Users
  • 2,266,667 Discussions
  • 7,911,709 Comments

Discussions

Categories

OracleJet GoogleMap in tab - Blank Screen

User_A45QN
User_A45QN Member Posts: 3 Blue Ribbon
in Oracle JET

I have OracleJet app that I am testing on iOS (device).

The googlemap in one of the tabs in tab control. The map is displaying without any issues. But when I switch the tab and come back to the tab with the map , I get a blank page. I don't see any errors in the console.

This is the code to load the map.

 map = plugin.google.maps.Map.getMap(document.getElementById('mapData'), options);                map.one(plugin.google.maps.event.MAP_READY, onMapInit);

on tab change listener , I have this code

if (map) {

                this.window.location.reload();

                document.getElementById("globalBody").classList.add("_gmaps_cdv_");

                document.getElementById("pageContent").classList.add("_gmaps_cdv_");

                document.getElementById("tabContnr").classList.add("_gmaps_cdv_");

                document.getElementById("sampleDemo").classList.add("_gmaps_cdv_");

                document.getElementById("demo-container").classList.add("_gmaps_cdv_");

                document.getElementById("maps-tab-panel").classList.add("_gmaps_cdv_");

                document.getElementById("cont").classList.add("_gmaps_cdv_");

                document.getElementById("mapData").classList.add("_gmaps_cdv_”);

        onMapInit(map);

I do see that the connected event fired the second the second time before the screen goes blank.

can any one tell on why the page is going blank ?

· Share on TwitterShare on Facebook

Best Answer

Answers

  • Philip Sommer
    Philip Sommer Member Posts: 118 Bronze Badge

    Hello User_A45QN,


    Can you explain why you reload the page and set a bunch of classes on startup? This should not be necessary in my opinion.

    How do you handle navigation between the tab pages. Have you set up modules as in the cookbook?

    https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=corerouter&demo=module


    Kind Regards,

    Philip

    · Share on TwitterShare on Facebook
  • Zeta411
    Zeta411 Member Posts: 5 Red Ribbon

    Sorry, that legacy code I had for Android which is working fine in.

    For IOS, On tab change listener, this is the code I have


    if (map) {

      onMapInit(map);


    In the onMapInit, I am setting the markers. I can see that the onMapInit is completed successfully after which the self.connected() is fired at which point the tab is blank. The map is not displayed.

    I tried adding plugin.google.maps.event.trigger(map, 'resize'); after onMapInit, it didn't help.

    I am not navigating to other pages here, just switching between the tabs.

    · Share on TwitterShare on Facebook
  • John 'JB' Brock-Oracle
    John 'JB' Brock-Oracle Posts: 2,879 Employee

    Try moving this code to the onTransitionCompleted() method and see if that helps. You can't guarantee that all DOM is available and rendered until after that lifecycle method is called.

    · Share on TwitterShare on Facebook
  • Zeta411
    Zeta411 Member Posts: 5 Red Ribbon

    Thanks for the reply John.

    The TransitionCompleted method is not getting called in my code. The following are the debug messages from the table change listener.

    --------------------------------

    tabChangeListener() invoked ==> maps

    tabChangeListener() Event is MAPS oj-offcanvas-outer-wrapper oj-offcanvas-page

    tabChangeListener() mapDiv 37.785834 -122.406417

    screen.width ==> 414

    onMapInit() invoked --> [object Object]

    mapInit completed.

    Camera animate changed.

    location is : 37.785834 , -122.406417

    Camera animate changed in marker completeed.


    ----------------------

    You can see that the onMapInit() is completed successfully.

    · Share on TwitterShare on Facebook
  • User_A45QN
    User_A45QN Member Posts: 3 Blue Ribbon
    Answer ✓

    I had some legacy code that was working for android. After I removed it, the tab switching started working

    · Share on TwitterShare on Facebook
developers