谷歌地图是灰色的

Question

我正在使用html和javascript在移动应用程序中使用谷歌地图.当我加载地图时,我只能看到左上角5%的地图.div容器的95%是灰色的.当我想用Firebug检查div时,整个地图突然加载.那可能是什么？我已经尝试了几个Stackoverflow线程,但没有解决方案适合我.谢谢.

码:

<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">       </script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="index.js"></script>

<div id="map" style="width: 700px; height: 700px;"></div>

var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 10,
       center: new google.maps.LatLng(-33.92, 151.25),
       mapTypeId: google.maps.MapTypeId.ROADMAP                                
});

index.js

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
});

当我使用以%或em测量的div属性时,它根本不起作用.

Answer 1

尝试在文档就绪时调用resize方法:

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});

Answer 2

检查mapOptions的中心或其他属性是否正确.在我的场合,谷歌地图无法解释中心财产; 尽管页面在css和jsp方面完全没有错误,但它始终只显示灰色地图.