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 with the map directly, the map is centered correctly at the center of the circle.

If you go to this home page of my app first () and then click your way into the page with the map, the map is

1. centered erringly (The map should be centered at the center of the circle).
2. missing an entire area covered in grey.

Why is the map erring when I click into the page with the map from my home page, but working correctly if I visit the page with the map directly?

I could just not use Ajax to load the map page with data-ajax='false'. However, I cannot actually do this because a mobile application does not allow for non-ajax loads.

google.maps.event.trigger(map, 'resize') seems to reposition the map when I enter it into the Chrome Web Developer console, but I am not sure where to call it in my javascript.

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 with the map directly, the map is centered correctly at the center of the circle.

http://goo.gl/XvLST

If you go to this home page of my app first (http://goo.gl/0IWgE) and then click your way into the page with the map, the map is

1. centered erringly (The map should be centered at the center of the circle).
2. missing an entire area covered in grey.

Why is the map erring when I click into the page with the map from my home page, but working correctly if I visit the page with the map directly?

I could just not use Ajax to load the map page with data-ajax='false'. However, I cannot actually do this because a mobile application does not allow for non-ajax loads.

google.maps.event.trigger(map, 'resize') seems to reposition the map when I enter it into the Chrome Web Developer console, but I am not sure where to call it in my javascript.

• javascript
• jquery
• google-maps
• jquery-mobile
• google-maps-api-3

Share Improve this question Follow edited Mar 22, 2012 at 7:04 dangerChihuahua007 asked Mar 19, 2012 at 19:42 dangerChihuahua007dangerChihuahua007 21k3838 gold badges128128 silver badges211211 bronze badges 4

• I dont see anything here dl.dropbox./u/1531353/CS164/mockups/map%20askew/index.html, can you put give a screen shot as when it is badly aligned – defau1t Commented Mar 19, 2012 at 19:57
• If you click on the link on that page, you should see a map that is badly centered. Oddly, the link is correctly centered if you visit goo.gl/XvLST directly. – dangerChihuahua007 Commented Mar 19, 2012 at 20:01
• I added screenshots in case it would help clarify my issue. Thanks. – dangerChihuahua007 Commented Mar 19, 2012 at 20:04
• There is nothing wrong in the map as I see it, I think the way you are drawing the circle is creating the issue. – defau1t Commented Mar 19, 2012 at 20:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7 +50

Because the page is actully loaded via ajax (when ing 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./demos/1.0/docs/api/events.html

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

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)

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

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