1

我试图使用fancybox以模式显示带有谷歌地图的位置的地图，但它向谷歌地图网络服务发出所有请求，但不呈现地图。这是我的代码

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 回答