谷歌地图显示在PHP的角落

Question

我的Google地图代码运行正常，但现在我的地图显示在一个角落，其余部分显示为灰色。我在谷歌搜索了一个解决方案，但一无所获。我尝试用chrome检查任何CSS问题。我刚刚点击了Chrome并点击了 Inspect element ，令人惊讶的是我的Google地图显示正确，当我重新加载页面时，它只是部分显示。

这是我的完整代码：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 6,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
google.maps.event.trigger(map, "resize");
var center = map.getCenter();
map.setCenter(center);
}
function codeAddress() {
var address = document.getElementById('t35').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
  alert('Geocode was not successful for the following reason: ' + status);
}
} );
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.trigger(map, "resize");
var center = map.getCenter();
map.setCenter(center);
</script>

我尝试了以下代码：

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

还有一个：

var center = map.getCenter();
map.setCenter(center);

没有任何建议，任何建议。