为什么我的地图在我的jQuery Mobile / Google Maps API3应用程序中居中？
我的jQuery Mobile Web应用程序中有一张由Google Maps Javascript API3提供支持的地图。 我添加了一个黑色边框的圆圈。
如果您直接使用地图转到我的应用的此页面，则地图会正确居中于圆的中心。
http://goo.gl/XvLST
如果你首先访问我的应用程序的这个主页（ http://goo.gl/0IWgE ），然后点击你的方式进入页面的地图，地图是
- 错误地居中（地图应该以圆心为中心）。
- 错过了整个灰色区域。
当我从主页点击带有地图的页面时，为什么地图会出错，但如果我直接访问带有地图的页面，工作正常？
我可以不使用Ajax加载data-ajax='false'的地图页面。 但是，我实际上无法做到这一点，因为移动应用程序不允许非ajax加载。
当我将地图输入Chrome Web Developer控制台时， google.maps.event.trigger(map, 'resize')似乎会重新定位地图，但我不确定在我的javascript中将其调用到何处。
因为页面是通过ajax（当来自索引时）被动态加载的 – 你正在使用的页面事件可能在DOM完全就绪之前被调用。 GMaps希望页面准备就绪。
尝试使用pageinit以外的其他事件。 看起来像pageshow可能是一个很好的（因为它在任何动画完成后运行） http://jquerymobile.com/demos/1.0/docs/api/events.html
或者也许你可以在pageshow事件中调用map resize事件。
页面是否在主页和地图之间重新加载？ 如果没有，并且如果您正在创建div或调整div的大小，则需要在div更改（更改大小或删除display：none）后调用google.maps.event.trigger(map, 'resize') ）。 （编辑显示触发事件的代码，感谢@Heitor Chang）
请致电google.maps.event.trigger(mapObj, "resize"); 在pageshow或pagechange
就我而言，我的解决方法是$('#mapdiv').trigger('create'); 运作良好。 但在其他情况下，我不知道它是否有效。