刷新页面后灰色框而不是谷歌地图答案

【问题标题】：Grey Box instead of Google Map after refreshing page刷新页面后灰色框而不是谷歌地图
【发布时间】：2017-06-04 21:33:31
【问题描述】：

我有一个带有标记的谷歌地图。每个标记都有一个与之关联的信息框。填充信息框所需的信息是通过 ajax 调用获取的。问题是，在选择进行 ajax 调用的标记之一后，如果成功完成，每当您刷新/重新加载页面时，Google 地图只是一个灰色框。

var map, markers = [];
var initMap = function (latitude, longitude) {
    var coords = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));
    var mapOptions = {
        zoom: 8,
        minZoom:2,
        center: coords,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
     }
     map = new google.maps.Map(document.getElementById('search-map'), mapOptions)
};
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(57,57,57)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    arrowPosition: 30,
    arrowStyle: 2
});
var contentString = "stuff"
for(var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
        position: markers[i][0],
        map: map,
        icon: markers[i][1]
    })
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            $.post($(ajaxURL, userIdObj, function(response) {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map, marker);
            })
        }
    })(marker, i));
}

【问题讨论】：

您将 latitude 和 longitude 传递给您的 initMap 方法 - 有些东西告诉我，您的 AJAX 调用一定是搞砸了，但是您正在传递这些参数。然后创建地图没有中心，你最终得到的只是一个灰色的盒子。
谢谢@Adam，我会调查的！
请阅读How to create a Minimal, Complete, and Verifiable example。

标签： javascript jquery ajax google-maps google-maps-api-3

【解决方案1】：

我也遇到过这种情况，但是在绘制地图后，您只需使用类似的东西调整它的大小

$('google-map').resize();

使其可见。

【讨论】：

【解决方案2】：

所以，只是快速更新。在完成这项任务时，我实际上经历了两种类型的“灰盒”。一种我可以在底部看到谷歌徽标，另一种我看不到。如果您可以在底部看到谷歌徽标，如上所述，您必须调整大小。这些方面的东西：google.maps.event.trigger(map, 'resize'); 如果您在灰色框中看不到任何内容，则很可能是您初始化地图的函数存在问题，尤其是 center:new google.maps.LatLng(39.739318, -89.266507)

【讨论】：