Tại sao việc căn giữa bản đồ của tôi bị tắt trong ứng dụng jQuery Mobile/API Google Maps của tôi?

Question

Tôi có một bản đồ được hỗ trợ bởi Google Maps Javascript API3 trong ứng dụng web jQuery Mobile của tôi. Tôi đã thêm một vòng tròn có đường viền màu đen trên đó.

Nếu bạn truy cập trực tiếp vào trang này của ứng dụng của tôi bằng bản đồ, bản đồ được căn giữa chính xác ở giữa vòng tròn.

http://goo.gl/XvLST

Nếu bạn đi đến trang chủ của ứng dụng của tôi đầu tiên (http://goo.gl/0IWgE) và sau đó nhấp vào theo cách của bạn vào trang với bản đồ, bản đồ là

1. làm trung tâm erringly (Bản đồ nên được căn giữa ở giữa vòng tròn).
2. thiếu toàn bộ khu vực có màu xám.

Tại sao erring bản đồ khi tôi nhấp vào trang với bản đồ từ trang chủ của tôi, nhưng làm việc một cách chính xác nếu tôi truy cập vào trang với bản đồ trực tiếp?

Tôi không thể sử dụng Ajax để tải trang bản đồ với data-ajax='false'. Tuy nhiên, tôi không thể thực sự làm điều này bởi vì một ứng dụng di động không cho phép tải không phải là ajax.

google.maps.event.trigger(map, 'resize') dường như định vị lại bản đồ khi tôi nhập nó vào bảng điều khiển dành cho nhà phát triển web Chrome, nhưng tôi không chắc chắn nên gọi nó ở đâu trong javascript của tôi.

Answer 1

Do trang được tải thông qua ajax (khi đến từ chỉ mục) - sự kiện trang bạn đang sử dụng có thể đang được gọi trước DOM hoàn toàn sẵn sàng. GMaps mong đợi trang sẵn sàng.

Thử sử dụng một sự kiện khác không phải là pageinit. Có vẻ như các trang có thể là một trang tốt (vì nó chạy sau khi bất kỳ hoạt ảnh nào đã hoàn thành) http://jquerymobile.com/demos/1.0/docs/api/events.html

Hoặc có thể bạn có thể thực hiện cuộc gọi đến sự kiện thay đổi kích thước bản đồ, trong một sự kiện trang.

Answer 2

Trang có tải lại giữa trang chủ và bản đồ không? Nếu không, và nếu bạn đang tạo hoặc thay đổi kích thước div, bạn sẽ cần gọi google.maps.event.trigger(map, 'resize') sau khi thay đổi div (thay đổi kích thước hoặc xóa màn hình: không có gì). (được chỉnh sửa để hiển thị mã để kích hoạt sự kiện, nhờ @Heitor Chang)

Answer 3

Gọi google.maps.event.trigger(mapObj, "resize"); trên pageshow hoặc pagechange

Answer 4

Trong trường hợp của tôi, cách giải quyết của tôi là $('#mapdiv').trigger('create'); hoạt động tốt. nhưng trong những trường hợp khác tôi không biết nó hoạt động.