Google地图无法呈现

时间:2012-05-09 09:17:37

标签: javascript google-maps

我尝试使用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但是地图没有显示。 可能有什么不对?

1 个答案:

答案 0 :(得分: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。