Why are the Google Maps controls & InfoWindow broken/skewed when using jQuery Mobile?

Question

Has anyone seen Google Maps V3 not play nicely with jQuery Mobile Versions 1.1.0 RC1 or 1.0.1?

Using jQuery 1.7.1.

The map controls & InfoWindow's are slightly skewed.

If one of the map divs changes from z-index:1 to :0 then it's fine.

I have no extra styling applied so I'm assuming it's being done by the Google Maps JavaScript.

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

EDIT: Solution finally found! Yaaaaaay!

SECOND EDIT To correctly center the map. Remove the separate map div inside the content div.

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

Thanks. G.

Answer 1

Add this to your CSS:

#map_canvas img {
max-width: none;
}

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

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

EDIT: Final version with map div removed to enable correct centering.

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

Answer 2

This issue occurs if you are using angular-google-maps too. Fix with the following instead of accepted answer:

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