JQuery Mobile and Google Maps Glitch
I need to display a google map on multiple pages of my mobile app that uses the jQuery Mobile framework. My app is just an Android app using webview and loading local .html pages (and .js files) stored in the resource directory.
The first time I bring up the map page, the map looks great and works great. If I go back to this page, or if I open another page with a map on it, the page will flicker on load and then the map itself is buggy. At first, only the left 1/3 of the map fragments are visible. Dragging the map only makes things worse. It is as if the map did not know which tiles it should load.
Has anyone encountered issues with running multiple map pages on the jQuery Mobile platform? If I had to be wary of guessing at this point, I would assume that the JQuery Mobile AJAX loading system is causing some interference between pages in relation to the map. I know there are ways to disable AJAX support, but I don't want to do this if I don't need to.
source to share
I created a map app for my school using the jQuery Mobile Framework. Due to the use of AJAX to load the google map on scrolling, this causes visual errors and slow loading.
http://ceapps.weber.edu/tourdeweber
Check one of the cards and let me know if your problem is similar.
I use $.mobile.page.prototype.options.domCache = true;
JQM to initialize to store every page you visited for better performance.
source to share