2017-02-14 334 views
1

谷歌地图显示为灰色框而不是地图。并在Windows上调整它的正常工作。
在窗口中加载地图显示是这样的: Screen 1谷歌地图显示灰色屏幕而不是地图

后窗口大小调整地图正常工作: Screen 2

<div style="width:100%; height:400px; padding:0; margin:0; border:3px solid gainsboro; border-radius:3px;"> 
    <div id="canvas" style="width:100%; height:100%; padding:0; margin:0;"></div> 
</div> 


<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"></script> 
<script> 
var map; 
var latLong; 
$(window).load(function() { 
    latLong = new google.maps.LatLng(47.0303105, 28.815481); 
    map = new google.maps.Map(document.getElementById('canvas'), { 
     center: latLong, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 14 
    }); 
      console.log("Map is ready.") 
}); 
</script> 

PS地图在引导模式div中声明
感谢您的帮助。

+0

后插入此触发对的。因为它更可能呈现的问题,请就如何复制或更好的小提琴或普拉克更多细节。 –

回答

2

谷歌家伙做特殊事件触发,这是我在这种情况下使用,以防止灰色地图:

google.maps.event.trigger(map, 'resize'); 

你需要调用'resize'地图代码完成后,甚至有一些小的延迟。试试你行console.log("Map is ready.")

+0

感谢您的帮助,我在那里找到答案http://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap – GVArt