1

ファンシーボックスを使用してモーダルでGoogleマップのある場所の地図を表示しようとしていますが、GoogleマップWebサービスへのすべてのリクエストを行いますが、マップをレンダリングしません. 私のコードはこちら

function show_map(options) {
        var html = '<div id="map-canvas" style="width:100%; height=100%"></div>';
        $.fancybox({
            'width':550,
            'height':450,
            'content':html,
            'modal' : false,
            'transitionIn' : 'none',
            'transitionOut': 'none',
            'speedIn' : 300,
            'speedOut' : 300,
            'autoScale' : false,
            'scrolling' : 'no',
            'centerOnScroll':true,
            'onComplete':function() 
            {
              var myOptions = {
              center: new google.maps.LatLng(options.lat,options.lng),
              zoom: 8,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
            }
        })
    }

Chrome の dom インスペクタを使用してモーダルを検査すると、生成された html が表示されますが、マップは表示されません。何が間違っている可能性がありますか？

4

1 に答える 1

1

map-canvas要素をdomに追加していないようです。そのため、GoogleMap API はそれを見つけることができません。次のことを試してください。

var mapCanvas = document.createElement('div');
mapCanvas.setAttribute('id','map-canvas');
mapCanvas.setAttribute('style','width:100%; height=100%');

document.getElementById('divParentContainer').appendChild(mapCanvas);

divParentContainerを、div の親として機能するコンテナーの ID に置き換えます。

于 2012-05-09T09:37:57.017 に答える