Google Maps JS Api不覆盖Kendo UI移动应用程序中的所有div

Question

我正在开发Kendo UI移动项目，并且需要在Google地图中工作。我设置了地图容器div的宽度和高度，但是当我显示地图时，它并不包含所有的div。这是一个图像和我正在使用的代码。

HTML：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 

的Javascript：

function initialiceMap() { 
var mapOptions = { 
    center: {lat: 40.659806, lng: -77.541504}, 
    zoom: 11, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(document.getElementById('map'), mapOptions); 

}

地图的绘制，但它并没有涵盖所有的股利。

我正在使用科尔多瓦3.5，Kendo UI Mobile。

有什么想法？

Answer 1

这似乎是Google Maps v3 load partially on top left corner, resize event does not work重复。

发生这种情况是因为在映射初始化后发生了resize事件/容器元素大小更改。加载页面后，您可以在地图google.maps.event.trigger(map, 'resize');上触发调整大小。

所以KendoUI与标签，这样的事情可能做的伎俩：

... 
map = new google.maps.Map(document.getElementById('map'), mapOptions); 
yourTabStrip.bind("activate", onActivate); 
function onActivate(ev) { 
    google.maps.event.trigger(map, 'resize'); 
} 

的激活触发后的标签变化和动画完成，所以这应该是足够了。