Why is the centering of my map off in my jQuery Mobile / Google Maps API3 application?

Question

I have a map powered by Google Maps Javascript API3 in my jQuery Mobile web application. I added a circle with black borders on it.

If you go to this page of my app

Answer 1

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

Answer 2

Because the page is actully loaded via ajax (when coming from index) - the page event you are using is probably being called before the DOM is totally ready. GMaps expect the page to be ready.

Try using a different event other than pageinit. Looks like pageshow might be a good one (as it runs after any animation has finished) http://jquerymobile.com/demos/1.0/docs/api/events.html

Or maybe you could put the call to the maps resize event, in a pageshow event.

Answer 3

Is the page reloading between the home page and the map? If not, and if you're creating or resizing a div, you'll need to call google.maps.event.trigger(map, 'resize') after the div changes (size change or removing a display:none). (edited to show the code to trigger the event, thanks to @Heitor Chang)

Answer 4

In my case, my workaround is $('#mapdiv').trigger('create'); working well. but in other cases I don't know it works.