Question

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

Answer 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。

Google地图无法呈现

1 个答案: