Google Maps White Screen in Intermittent Internet
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!
The google maps api was included in index.html with the following:
title: 'Welcome to Sencha Touch 2'
html: "New Sencha Project"
title: 'Google Maps'
When entering the maps page without internet, there is an error getting google static maps, as seen in the chrome debugger console:
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:
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.
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!