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’);