¿Por qué el centrado de mi mapa está desactivado en mi aplicación jQuery Mobile/Google Maps API3?

Tengo un mapa con la API de Google Maps JavaScript API3 en mi aplicación web jQuery Mobile. Agregué un círculo con bordes negros en él.¿Por qué el centrado de mi mapa está desactivado en mi aplicación jQuery Mobile/Google Maps API3?

Si va directamente a esta página de mi aplicación con el mapa, el mapa se centra correctamente en el centro del círculo.

http://goo.gl/XvLST

enter image description here

Si vas a esta página de inicio de mi primera aplicación (http://goo.gl/0IWgE) y haga clic en su camino a la página con el mapa, el mapa es

centrado erróneamente (El mapa debe estar centrado en el centro del círculo).
falta un área entera cubierta de gris.

enter image description here

¿Por qué es el mapa que yerran al hacer clic en la página con el mapa de mi página de inicio, pero trabajando correctamente si visita la página con el mapa directamente?

No podría usar Ajax para cargar la página del mapa con data-ajax='false'. Sin embargo, no puedo hacerlo porque una aplicación móvil no permite cargas que no sean ajax.

google.maps.event.trigger(map, 'resize') parece volver a colocar el mapa cuando lo introduzco en la consola de Chrome Web Developer, pero no estoy seguro de cómo llamarlo en mi javascript.

Fuente

2012-03-19 dangerChihuahua007

No veo nada aquí http://dl.dropbox.com/u/1531353/CS164/mockups/map%20askew/index.html, ¿puedes poner una captura de pantalla cuando está mal alineado – defau1t

Si haga clic en el enlace en esa página, debería ver un mapa que está mal centrado. Curiosamente, el enlace está correctamente centrado si visita http://goo.gl/XvLST directamente. – dangerChihuahua007

Agregué capturas de pantalla en caso de que ayudara a aclarar mi problema. Gracias. – dangerChihuahua007

Como la página está cargada en realidad a través de ajax (cuando proviene del índice), es probable que se llame al evento de página que está utilizando antes de que DOM esté totalmente listo GMaps espera que la página esté lista.

Pruebe usar un evento diferente a pageinit. Parece que pageshow podría ser una buena idea (ya que se ejecuta después de cualquier animación ha terminado) http://jquerymobile.com/demos/1.0/docs/api/events.html

O tal vez usted podría poner la llamada a cambiar el tamaño de los mapas caso, en un evento pageshow.

Fuente

2012-03-22 15:24:43 barryhunter

Gracias, lo intentaré lo antes posible. Solo curiosidad, ¿hay una forma sistemática de ver todos los eventos activados para un elemento específico en una página? – dangerChihuahua007

No es que yo sepa. Tendría que escuchar todos los eventos y registrarlos. Pero necesitas saber todos los eventos que existen para que eso funcione :) – barryhunter

Sí, el cambio de 'pageinit' a 'pageshow' en tu página funcionó para mí. – codaniel

¿Se está recargando la página entre la página de inicio y el mapa? De lo contrario, y si está creando o redimensionando un div, deberá llamar al google.maps.event.trigger(map, 'resize') después de que el div cambie (cambio de tamaño o eliminación de una pantalla: ninguno). (editado para mostrar el código para desencadenar el evento, gracias a @Heitor Chang)

Fuente

2012-03-19 20:17:27

Gracias, pero obtengo este error con 'map.resize()' cuando lo llamo: 'UnEught TypeError: Object # no tiene ningún método 'resize''. La referencia de Google Maps API3 tampoco menciona un método 'resize()' asociado con un objeto Map. http://goo.gl/ORciv – dangerChihuahua007

Pruebe google.maps.event.trigger (map, 'resize')? Está en "eventos" de google.maps.Map en la API ref. –

Gracias, ¿en cuál de mis funciones crees que debería llamarlo? Intenté llamarlo en 'addCircle()' sin éxito. – dangerChihuahua007

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

Fuente

2012-10-14 21:23:41

En mi caso, mi solución es $('#mapdiv').trigger('create'); funcionando bien. pero en otros casos, no sé si funciona.

Fuente

2016-06-12 15:32:19 Kumquat601

¿Por qué el centrado de mi mapa está desactivado en mi aplicación jQuery Mobile/Google Maps API3?

Respuesta

Cuestiones relacionadas