WordPress.org

Ready to get started?Download WordPress

Forums

Twenty eleven 1.2 breaks embedded Google Maps (10 posts)

  1. iorinne
    Member
    Posted 2 years 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.

  2. cfohlin
    Member
    Posted 2 years 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

  3. iorinne
    Member
    Posted 2 years 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?

  4. MarkRH
    Member
    Posted 2 years ago #

    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.

  5. S Smith
    Member
    Posted 2 years ago #

    Thanks so much for this thread - saved me hours of experimenting with the Twenty Eleven CSS.

  6. Callum Macdonald
    Member
    Posted 2 years ago #

    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.

  7. veleno
    Member
    Posted 2 years ago #

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

  8. dorothai
    Member
    Posted 2 years 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

  9. Brian Hogg
    Member
    Posted 2 years ago #

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

  10. tuxbrain
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic