Support » Themes and Templates » Twenty eleven 1.2 breaks embedded Google Maps

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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

    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


    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.

    Thank you guys for this thread. I was going crazy!

    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.


    Yet another note of thanks! Would have been tough to pin that rule down on a child theme.

    Dude, another one here to give you a lot of thanks

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Twenty eleven 1.2 breaks embedded Google Maps’ is closed to new replies.