google map pin not centered when using hidden embedded iframe

A bit of an issue this lately when embedding google maps iframes that are hidden by default, and are shown by the user clicking a button (for example). Seems the Google map pin not centered when using hidden embedded iframes…

The pins end up not quite centered and out of the viewable area, took me quite a few attempts and searches to figure out what and why…

…i still don’t know why, but i know what: Figured out that if i slightly amended the src attribute using firebug, the maps would jump into the correct positions. Weird but true.

So i had to add a little extra code to perform this little tweak, and the maps started behaving as they should! This is a snippet of my code, the italicised text is what i needed to add to get the google maps pins showing centered.

$(‘.officeMap’, p).show(250, function()
// this bullshit is because google map pins are not loaded correctly when embedding an iframe that is hidden, and then subsequently made visible.
var i = $(this).find(‘iframe’);
var is = $(i).attr(‘src’);
i.delay(250).attr(‘src’, is);

I think in futire i will stick to using the javascript Google Maps API instead, as its much more flexible. The iframe solution was a bit of a shortcut so it serves me right!

8 thoughts on “google map pin not centered when using hidden embedded iframe”

  1. hi Stuart, i am so glad i found this.. I searched all over internet and i think this is what i need… could you please explain a bit more how to use the code.. i can put it in my footer.php javascript but then what is the html code i need for the iframe?

    is it iframe code…

  2. Essentially I’m getting the src attribute of the I frame, then waiting 250 milliseconds before setting the src again (to what it already is of course). This simple dom change triggers something in googles code that causes the map to re-center itself.

Leave a Reply

Your email address will not be published. Required fields are marked *