1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    lwang is on a distinguished road

      0  

    Default Google Maps White Screen in Intermittent Internet

    Google Maps White Screen in Intermittent Internet


    Hi,

    I've been encountering a blank white screen in google maps when the internet connection is unreliable. The white screen then doesn't seem to recover.

    This is important because I'm building an app that has a use case in areas with potentially spotty internet, so the app needs to at least recover from the blank white screen.

    How to recreate problem:
    -I have a tab panel where one of the tabs has an extension of Ext.Map (see code below).
    -I run the sencha project in a browser (say, chrome) with internet
    -Then I cut the internet before going into the map
    -And then I enter the maps tab and notice a blank white screen.

    If I plug the internet back in, and continue playing with the app (going back and forth between views), I notice that the google map never loads. It would be great to know whether anyone else has encountered this problem, or has any idea what could be done differently!

    Code:
    Ext.define('GMaps.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'GMaps.view.MapView'
        ],
        config: {
            tabBarPosition: 'bottom',
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Welcome to Sencha Touch 2'
                        }
                    ],
                    html: "New Sencha Project"
                },
                {
                    title: 'Maps',
                    xtype: 'map',
                    iconCls: 'maps',
                    items: [
                        {
                            xtype: 'titlebar',
                            docked: 'top',
                            title: 'Google Maps'
                        }
                    ]
                }
            ]
        }
    });
    The google maps api was included in index.html with the following:
    Code:
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    Details:
    When entering the maps page without internet, there is an error getting google static maps, as seen in the chrome debugger console:
    http://maps.gstatic.com/cat_js/intl/...common,map}.js
    However, subsequent entries into the maps page do not produce the same error again, so could this be the reason why maps are getting stuck on the white screen after attempting to load once?
    Refreshing the browser page allows the map to reload and show the tiles, and so does making another call to the google maps api.

    Attempts to fix:
    -Destroying and recreating: I have attempted to destroy the map after leaving the maps view, and recreate it when the user re-enters, but the maps remain blank.
    -Detecting tiles on screen: I have used the google api v3 event, tilesloaded, to check when the map actually shows, but it seems to fire regardless of whether the screen is blank or if the map has rendered.
    -Detecting map render: I have used the sencha event, render, for a map but the event fires regardless of whether the screen is blank or if the map has rendered.
    -A workaround - unloading the google maps api and reloading it. As suggested by:
    http://stackoverflow.com/questions/9...-delete-remove
    I have tried removing the div that contains the google map, and reloading the map using another call to the google maps api. However, this results in a warning: "google maps api has been included multiple times on this page," as seen in the chrome browser, which probably means the first api wasn't actually removed.


    To summarize:

    Problem: If the internet connection is cut before going into the maps page, the maps page becomes a blank white screen that doesn't recover, even if the internet returns or there is navigation to different views.

    Question: Is there a way to recover from or work around the white screen so that the maps load properly? Thanks!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,396
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Does the http://maps.google.com/maps/api/js?sensor=true ever fully load or just fail out? If it's failing to load then you need to destroy the <script> and create another to get it to load.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    lwang is on a distinguished road

      0  

    Default


    Yes, it does load. According to stackoverflow (http://stackoverflow.com/questions/9...-api-is-loaded), it is possible to check if the maps api has loaded.

    So in the chrome console, I've entered:
    google.maps

    Object{__gjsload__: function, Animation: Object, Circle: function, ControlPosition: Object, GroundOverlay: function}

    The result is an object, which should mean the api has loaded. This is true even if the maps screen is white/blank.

    Do you have any further suggestions for me on how I could go about solving this problem? It would be extremely helpful! Thanks in advance.