1

Google マップ v3 を Fancybox2 に統合しようとしていますが、うまく機能していないようです。

ここでマップを初期化します: http://vejstrup.dk.nt15.unoeuro-server.com/da/kort.aspx 次に、リンク「Vis adresse på kort」から ajax を使用してマップを呼び出します: http:/ /vejstrup.dk.nt15.unoeuro-server.com/da/kontakt.aspx

マップが正しくロードされているように見える場合がありますが、ズーム コントロール、マップ コントロール、Google ロゴが表示されません。

リンクは次のようになります。

<a href="/da/kort.aspx?alttemplate=map" target="_blank" class="open_ajax fancybox.ajax" data-fancybox-type="ajax">
    Vis adresse på kort
</a>

および Fancybox スクリプト:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/scripts/map.js"></script>
<script>
                $(".open_ajax").fancybox({
                    width     : '90%',
                    height    : '90%',
                    fixed: false,
                    autoSize : false,
                    autoCenter : true,
                    afterLoad  :  function() {
                        loadMap();
                    },
                    tpl: { 
                      closeBtn: '<div title="' + fbCloseTitle + '" class="fancybox-item fancybox-close"></div>',
                      next: '<a title="' + fbNextTitle + '" class="fancybox-item fancybox-next"><span></span></a>',
                      prev: '<a title="' + fbPrevTitle + '" class="fancybox-item fancybox-prev"><span></span></a>'
                    }
                });
            </script>

map.js: http://vejstrup.dk.nt15.unoeuro-server.com/scripts/map.js

これを修正するために何が欠けていますか?

4

1 に答える 1

0

iframeこの方法を使ってみませんか？次のようにマップページに直接リンクします。

<a class="fancybox fancybox.iframe" href="http://vejstrup.dk.nt15.unoeuro-server.com/da/kort.aspx?alttemplate=map">Open Google Map</a>

...特別なクラスに注意fancybox.iframeしてください。次に、スクリプト： 

$(".fancybox").fancybox({
    width: '90%',
    height: '90%',
    fixed: false,
    autoSize: false,
    autoCenter: true,
    tpl: {
        closeBtn: '<div title="' + fbCloseTitle + '" class="fancybox-item fancybox-close"></div>',
        next: '<a title="' + fbNextTitle + '" class="fancybox-item fancybox-next"><span></span></a>',
        prev: '<a title="' + fbPrevTitle + '" class="fancybox-item fancybox-prev"><span></span></a>'
    }
});

デモを見る

于 2013-01-03T19:01:49.320 に答える