¿Por qué los controles e InfoWindow de Google Maps están rotos/sesgados al usar jQuery Mobile?

Question

¿Alguien ha visto Google Maps V3 no jugar bien con jQuery Mobile Versiones 1.1.0 RC1 o 1.0.1?

Usando jQuery 1.7.1.

Los controles de mapa & InfoWindow están ligeramente sesgados.

Si uno de los divs del mapa cambia de z-index: 1 a: 0, entonces está bien.

No tengo un estilo extra aplicado, así que supongo que lo está haciendo JavaScript de Google Maps.

jsFiddle roto: http://jsfiddle.net/gyaresu/zDVKn/7/

EDITAR: Solución finalmente encontró! Yaaaaaay!

SEGUNDA EDICION Para centrar correctamente el mapa. Elimine el div del mapa por separado dentro del div de contenido.

http://jsfiddle.net/zDVKn/9/

Gracias. G.

Answer 1

Añadir esto a su CSS:

#map_canvas img { 
max-width: none; 
} 

roto jsFiddle: http://jsfiddle.net/gyaresu/zDVKn/7/

Con CSS solución: http://jsfiddle.net/gyaresu/zDVKn/8/

EDITAR: Versión final de Mapa div eliminado para permitir un centrado correcto .

http://jsfiddle.net/zDVKn/9/

Answer 2

Este problema se produce si está utilizando angular-google-maps también. Solución con la siguiente en lugar de la respuesta aceptada:

.angular-google-map img { 
    max-width: inherit; 
}