CODEWITHSUNDEEP
androidgoogle-mapsjquery-mobilegoogle-maps-api-3
Matt
Matt

Reputation: 2036

JQuery Mobile & Google Maps Glitch

I need to display a Google Map on multiple pages of my mobile app, which is using the JQuery Mobile framework. My app is just an Android app, using a webview, and loading local .html pages (and .js files) stored in the assets directory.

The first time I bring up a page with a map on it, the map looks great and works great. If I return to this page, or if I open another page with a map on it, the page flickers when loading, and then the map itself glitches. Initially only about the left 1/3rd of the map tiles are visible. Dragging the map around only makes the problem worse. It's as if the map does not know which tiles it should be loading.

Has anyone encountered issues running multiple map pages on the JQuery Mobile framework? If I had to hazard a guess at this point, I would guess that the AJAX loading system of the JQuery Mobile framework is causing some kind of interference between the pages with regard to the map. I know there are ways to turn off the AJAX support, but I'd rather not do that if I don't have to.

Upvotes: 2

Views: 1721

Answers (2)

Peter Tseng
Peter Tseng

Reputation: 14003

Call google.maps.event.trigger(mapObj, "resize"); on pageshow or pagechange

Upvotes: 0

Jon Douglas
Jon Douglas

Reputation: 13176

I have created a map application for my school using the jQuery Mobile Framework. Because of the use of AJAX to load the google map as you scroll, this is what is causing the visual errors and slow loading.

http://ceapps.weber.edu/tourdeweber

Test one of the maps, and let me know if your problem is similar.

I use the $.mobile.page.prototype.options.domCache = true; within initializing the JQM to store each page you've visited for faster performance.

Upvotes: 1

Related Questions