Loading...

Search jQuery

Search

jQuery Forum

Google Map API v3 + Latest Jquery Mobile.css CONFLICT

in jQuery Mobile • 11 years ago

With the latest release of jquery mobile zoom and pan controls of the google map are no longer displayed correctly .. How can I fix it? .. I tried to load an older version, for example http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css, and the controls are displayed correctly, but many features are no longer compatible.

1

Replies(4)

Re: Google Map API v3 + Latest Jquery Mobile.css CONFLICT

11 years ago

Hi, i have the same problems with the release of jquery mobile 1.1.0-rc.1.
Problems of controls, icons disappear into the infowindow...

if someone has a solution to fix it ? thanks

arschmitz

Re: Google Map API v3 + Latest Jquery Mobile.css CONFLICT

11 years ago

I have run into this problem and its actually a really easy fix. the problem is jquery mobile has the css rule

.ui-mobile img{
max-width:100%;
}

This interferes with the google maps image sprites as they are larger then 100% width. so to fix it simply add this rule to your css

#mapID img{

max-width:none;

}

just replace #mapID with the actual id of your map

Re: Google Map API v3 + Latest Jquery Mobile.css CONFLICT

11 years ago

on iphone 4s this css fix works great!

but on android 2.3.4 the infowindows won't close :(

any idea ?

Re: Google Map API v3 + Latest Jquery Mobile.css CONFLICT

11 years ago

@arschmitz , it works, thanks for the fix