Question

我有一个问题：在我的网站的其中一个网页上我使用了谷歌地图，问题是它没有填充100％的div - 地图填充了div的大约20％。我尝试了几件事，但我无法解决这个问题。我将非常感谢您解决这个问题的任何帮助！您可以在http://travulum.com看到问题（请点击“菜单”，而不是“旅行视频”，然后点击其中一个旅行视频 - 第一次谷歌地图填写div为100％，但如果您点击第二次旅行视频 - 第二次谷歌地图不填充div 100％等等..... 我用这个脚本：

function updatePlayer(video_data){



    $('#map_canvas').empty().removeAttr('style');



    var BigPlayer = $('#bambuserPlayer').empty();



    if(typeof video_data !== 'undefined'){



        var map_center = new google.maps.LatLng(parseFloat(video_data.lat), parseFloat(video_data.lon));


        var myOptions =  {       

            zoom:10,

            center: map_center,

            mapTypeId: google.maps.MapTypeId.HYBRID,

            streetViewControl: false,

            panControl: false

        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);


        var marker = new google.maps.Marker({

            position: map_center,

            map: map,

            icon: createMarkerIcon('archived')

        });


        var url = 'http://embed.bambuser.com/broadcast/' + video_data.id;

        BigPlayer.html('<iframe width="450" height="450" src="'+ url +'" frameborder="0" ></iframe>');

    }

}

Answer 1

如果您隐藏了地图div，则需要调用map.checkResize()告诉API您更改了父容器的大小。

Answer 2

尝试在某些CSS中设置地图的大小。我检查了FireBug，确实地图占用了空的div的整个空间，id =“map_canvas”

 #map_canvas { height: 400px; width: 600px; }

Google地图未填写<div> </div>

2 个答案: