CODEWITHSUNDEEP
jquerygoogle-mapsfancyboxfancybox-2
caramba
caramba

Reputation: 22490

google map is not centered in fancybox

I was looking and trying an entire day but couldn't find one right solution for this problem. The part I need to be centered is always top left in FF and IE, Safari seems to be more bottom left...

this is all code you need to try, copy, paste and click...

big screen is good to see the problem doesnt looks to bad on small screens

thanks for help

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".google_iframe").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
</head>
<body>
<a class="google_iframe" href="https://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=202414688179067925321.0004d62815a849d23c081&amp;t=h&amp;ll=43.36373,16.508332&amp;spn=1.617251,3.364563&amp;output=embed">
    click here for fancy
</a>
</body>
</html>

jsFiddle

Upvotes: 2

Views: 3218

Answers (1)

JFK
JFK

Reputation: 41143

The issue seems to be created when you try to pre-load the fancybox iframe (default value is true). As a workaround just disable iframe pre-loading within your fancybox custom script like :

$(document).ready(function () {
    $('.google_iframe').fancybox({
        // 'autoScale'    : false, // not valid in v2.x, use autoSize instead
        // 'transitionIn' : 'none', // not valid in v2.x, use openEffect instead
        // 'transitionOut': 'none', // not valid in v2.x, use closeEffect instead
        width      : '75%',
        height     : '75%',
        autoSize   : false,
        openEffect : 'none',
        closeEffect: 'none',
        type       : "iframe",
        iframe     : {
           preload : false // this will prevent to place map off center
        }
    });
});

... notice that I commented out some API options for v1.3.4 that are not valid in v2.x

See JSFIDDLE ... or full page see http://jsfiddle.net/Sy8F8/show/lite/, then you can compare it with your full page (not centered) jsfiddle

Upvotes: 7

Related Questions