谷歌地图 API 灰色背景答案

【问题标题】：Google Maps API Grey background谷歌地图 API 灰色背景
【发布时间】：2015-10-14 04:24:31
【问题描述】：

我的网站上的 Google 地图有问题。地图和代码在本地工作，但是当我发布地图时，它只显示灰色背景。我有 Joomla 网站。请有人帮助我。这是我的代码：

<head>
     <script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="/maps/westcampus.js"></script>

<script>
var infowindow;

function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(37.42362457157549, -122.0921247138165),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 10
});

for (var x in westcampus) {
    var building = westcampus[x];
    var location = new google.maps.LatLng(building.lat,building.lng);
    addMarker(map, building.name, location);
}
}
var bounds = new google.maps.LatLngBounds ();
function addMarker(map, name, location) {

    var marker= new google.maps.Marker({
        position: location,
        map: map
    });
    bounds.extend (location);

    google.maps.event.addListener(marker, 'click', function() {
    if (typeof infowindow != 'undefined') infowindow.close();
    infowindow = new google.maps.InfoWindow({
    content: name
    });
        infowindow.open(map,marker);
    });
    map.fitBounds (bounds);
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>   


<div id="map_canvas" style="width: 100%; height: 400px;"></div>

</body>
</html>

和数据库

var westcampus = [{'name':'Google West Campus 1','lat':37.423901,'lng':-122.091497,'ost': "Ostatak!"},
{'name':'Google West Campus 2','lat':37.424194,'lng':-122.092699,'ost': "Ostatak!"},
{'name':'Google West Campus 3','lat':37.423901,'lng':-122.092456,'ost': "Ostatak!"}];

谢谢

【问题讨论】：

标签： api maps

【解决方案1】：

您使用的代码似乎没有任何问题。

所以问题出在服务器上，以及它从哪里请求地图。

您是否正在运行 SSL，并尝试通过 HTTP 请求 JavaScript？也许远程到服务器，看看你是否可以在本地运行页面。用 fiddler 的 chrome 调查网络。可能会在某处或类似的地方返回 403。

或加载时间问题。有时谷歌地图需要在地图触发空闲事件时调用调整大小事件。所以它会重新计算地图图块的边界。

真的无法提出任何其他建议。祝你好运。

【讨论】：

“有时谷歌地图需要在地图触发空闲事件时调用调整大小事件”这似乎是我遇到的问题。地图加载，并在底角显示谷歌徽标，但在调整窗口大小之前，我只会得到灰色背景，而不是实际地图。如何在不要求用户逐字调整窗口大小的情况下触发这种调整大小效果？
哇，我再也没有回到这个对不起的文森特身边。
我知道这是不久前的事了。但为了完成这个。答案是 google.maps.event.trigger(map, "resize");
感谢安东尼。这实际上正是我最终所做的。我想我在其他地方找到了这个建议，而且效果很好。