The google maps in a fancybox iframe is not centered according to my script

Sylvain

unread,

Nov 12, 2009, 5:52:41 AM11/12/09

to fancybox

Hello everyone,

Excuse my English, I am of French origin.
I display a google maps in a iframe with the script FancyBox , but the
map is not displayed correctly: the map is not centered according to
my script, there is a slight difference.
Do you know where it may come?

I love this script!

Best regards,

JFK

unread,

Nov 16, 2009, 8:55:58 PM11/16/09

to fancybox

Bonjour
a similar issue was reported back in April
I documented it here:
http://jquery.diaz-cornen.com/fancybox/index_map.html

check if that works for you
salut

Michael Haschke

unread,

Dec 17, 2009, 8:31:59 PM12/17/09

to fancybox

Hello everybody,

the other thread (which was mentioned here) seems to be closed, I
cannot answer there directly.

Firefox seems to render it right logically, because when fancybox is
loaded, the iframe is hidden by display:none which means that the
iframe has not a dimension (in other words, its size is 0px x 0px).
The marker is centered at this size (at position 0px, 0px). Later the
iframe is shown at the size the fancybox has, but the marker is still
staying at 0,0 (left top corner).

Using the ajax option is only a workaround because without javascript
the link doesn't really work because the linked document is not valid
html (and if you use .txt as loaded ajax document, the browser will
only show one line of plain html code).

I found two other solutions:

1) do not hide the iframe with display:none initially, change the css
to display:block; - using this solution the iframe is shown partly
when the fancybox pops up.

2) use the css visibilty definition for the iframe, this solution will
pop up the fancybox, and after loading the iframe content the iframe
is show. this needs some modification in the fancybox javascript and
css:

in the css you have to change:
#fancy_frame {

position: relative;

/*width: 100%;

height: 100%;*/

display: block;
visibility:hidden;

}

in the javascript we need two changes:

- the iframe now needs a dimension (because width/height is not
defined in css): _set_content('<iframe id="fancy_frame"
onload="$.fn.fancybox.showIframe()" name="fancy_iframe' + Math.round
(Math.random()*1000) + '" frameborder="0" hspace="0" src="' + href +
'" width="'+opts.frameWidth+'" height="'+opts.frameHeight+'"></
iframe>', opts.frameWidth, opts.frameHeight);

- after iframe content is loaded, we need to change visibility:
$.fn.fancybox.showIframe = function() { $('#fancy_frame').css
('visibility', 'visible');};