Perché i controlli di Google Maps e InfoWindow sono interrotti/distorti quando si utilizza jQuery Mobile?

Question

Qualcuno ha visto Google Maps V3 non giocare bene con jQuery Mobile Versioni 1.1.0 RC1 o 1.0.1?

Utilizzo di jQuery 1.7.1.

La mappa controlla & Le finestre di informazioni sono leggermente inclinate.

Se una delle div cartine cambia da z-index: 1 a: 0 allora va bene.

Non ho applicato alcuno stile aggiuntivo, quindi presumo che venga eseguito da JavaScript di Google Maps.

rotto JSFiddle: http://jsfiddle.net/gyaresu/zDVKn/7/

EDIT: Soluzione finalmente trovato! Yaaaaaay!

SECONDA MODIFICA Per centrare correttamente la mappa. Rimuovere il div cart separato all'interno del div del contenuto.

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

Grazie. G.

Answer 1

Aggiungi questo alla tua CSS:

#map_canvas img { 
max-width: none; 
} 

rotto JSFiddle: http://jsfiddle.net/gyaresu/zDVKn/7/

Con fix CSS: http://jsfiddle.net/gyaresu/zDVKn/8/

EDIT: versione finale con il programma div rimosso per consentire il corretto centraggio .

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

Answer 2

Questo problema si verifica se si utilizza angular-google-maps troppo. Risolto il problema con la risposta seguente anziché accettata:

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