Why is my map center disabled in jQuery Mobile / Google Maps API3?

I have a map based on the Javascript Google Maps3 API in my jQuery Mobile web application. I added a circle with black borders on it.

If you go to this page of your application with a map directly, the map will be correctly centered in the center of the circle.

http://goo.gl/XvLST

enter image description here

If you first go to this home page of my application ( http://goo.gl/0IWgE ), and then click your path to the page using the map, display

  • centered erroneously (the map should be centered in the center of the circle).
  • the entire gray area is missing.

enter image description here

, , , ?

Ajax data-ajax='false'. , -ajax.

google.maps.event.trigger(map, 'resize') , , Chrome Web Developer, , javascript.

+5
4

ajax ( ), , , , DOM . GMaps , .

, pageinit. , ( - ) http://jquerymobile.com/demos/1.0/docs/api/events.html

, , .

+7

? , div, google.maps.event.trigger(map, 'resize') div ( : none). (, , @Heitor Chang)

+1

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

0

In my case, my workaround   $('#mapdiv').trigger('create'); works well. but in other cases, I do not know how this works.

0
source

All Articles