iorinne
Member
Posted 10 months ago #
Hi,
I found that embedding Google Maps (Javascript version) inside the post/page content of a WordPress site using the Twenty Eleven 1.2 theme messes up the map pretty bad. The most notable indications are vertical stripes across the map displaying the map background. Also part of the map controls are not visible or look broken.
For screenshot, see http://dl.dropbox.com/u/32130512/twentyeleven_with_gmaps.png
The CSS causing this is the "max-width: 97.5%" for img tags at http://core.trac.wordpress.org/browser/tags/3.2.1/wp-content/themes/twentyeleven/style.css#L853
Fix: Set "max-width" to "none" for img tags inside Google Maps divs.
cfohlin
Member
Posted 10 months ago #
Any luck on a resolution?
Embedding a Google Map within the body of a page results in an invisible map. The only thing I'm seeing is that TwentyEleven doesn't like that Google Maps container gets set as position:relative
iorinne
Member
Posted 10 months ago #
You need to set the height and width for the GMaps container element to something sensible. Otherwise the map container will have 0 height, and thus seems "invisible".
I got the maps in my theme working just fine be overriding the "max-width: 97.5%" for the img tags inside the Google Maps container element using "max-width: none". This was ok, since I was using a child theme anyway, so I didn't have to modify the original CSS files of Twenty Eleven.
Seems that the strange-looking "97.5%" rule is somehow related to the image auto-scaling feature of the WordPress themes, but I'm yet to find a good source explaining this (hack ?). Twenty Eleven theme developers: could you please explain this max-width thing in a couple of lines? What do I lose if I just disable this setting in my themes?
I think they did it to force large images to fit within the confines of the content and widget areas. In my sidebar, it was originally scaling down my 200 pixel wide images until I made the Sidebar itself wide enough to keep 200 pixel wide images from being scaled down.
S Smith
Member
Posted 9 months ago #
Thanks so much for this thread - saved me hours of experimenting with the Twenty Eleven CSS.
EPIC! iorinne you saved me hours of faffing around trying to figure out what was going on. Thank you kindly.
For anyone who finds this thread and is unsure what the solution requires, here's what I did. My map div is <div id="map_canvas"></div> so I added this CSS just above it:
<style type="text/css">#map_canvas img { max-width: none; }</style>
Maps work once again. :-)
Love & joy - Callum.
veleno
Member
Posted 5 months ago #
Thank you guys for this thread. I was going crazy!
dorothai
Member
Posted 2 months ago #
Helped me too! Thanks must have been while figuring this one out - was only battling for 2 hours when I found this entry.
I have removed all these widths of images.
I wonder why they put it in in the first place, better add theme support image sizes.
Great Day to all.
dorothai
