Question

我正在使用ajax加载（进入div）包含Google地图的页面，但是当它完成加载时，它只显示地图的灰色背景，左下角有Google徽标，并且“使用条款“链接在右下角。

如果我调整窗口大小，则会立即显示地图。此外，如果我按F5重新加载整个页面，地图会正常加载。只有当我最初使用jQuery ajax加载此地图页面时，我才能获得灰色地图。

在容器页面上，我加载了地图api。

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

在地图页面上，我会做其他所有事情。

$(document).ready(function() {
  initializeMap();
});

function initializeMap() {
  var companyname = document.getElementById("companyname").value;

  infowindow = new google.maps.InfoWindow();
  latlng = new google.maps.LatLng(-34.397, 150.644);

  var mapOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  geo = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
  bounds = new google.maps.LatLngBounds();

  resultsPanel = new google.maps.DirectionsRenderer({suppressMarkers:true});
  resultsPanel.setMap(map);

  $("#progressbar").progressbar(0);

  var companyaddress = getCompanyAddress();
  setCompanyMarker(companyaddress,companyname)
}

在调整大小时，我重新计算高度，使其填满整页。如果我不这样做，那么地图打开时的高度为1px，但我不知道为什么。这可能是同一个问题吗？

function calculateHeight(){
  var height = $('#maincontent').height();
  $('#map-canvas').css("height",height);
}

$(window).resize(function () {
  calculateHeight();
});

由于地图在用户手动调整窗口大小时出现，我认为以编程方式调用resize事件会产生相同的效果，所以我添加了这个：

$(window).trigger('resize');

但那没有做任何事。

我尝试将api脚本移动到地图页面但是如果我多次加载页面会导致“您已多次加载相同的脚本”错误，这会导致其他错误。但是，通过此设置，我可以在三页加载后使用ajax 成功加载地图。换句话说，在加载容器页面一次后，我必须单击菜单项（加载地图页面）三次以使其正确加载。前两次它仍然无法正确加载，但之后它每次都正确加载，尽管有大量的JavaScript错误。

我还尝试按照this suggestion异步加载api脚本。

我还尝试按照this suggestion向api脚本添加“async defer”。

这些建议都没有奏效，现在我就在这里。

当通过ajax加载页面时，导致地图加载灰色背景的原因是什么，我该怎么办？

Answer 1

1.确保map-canvas在CSS中设置了width。

2.您是否真的尝试过google.maps.event.trigger(map,'resize');作为geocodezip建议？您需要在任何map-canvas div的维度更改（calculateHeight）之后调用它，或者对地图div的可见性进行任何更改。如果map-canvas div或其父级或其父级的父级（任何前任）在某个时间点设置了display:none，则地图视图将无法正确初始化，您将只看到灰色地图。还要将map resize代码添加到某个超时中以确定，然后将其降低（如果有效），例如：

function calculateHeight(){
  var height = $('#maincontent').height();
  $('#map-canvas').css("height",height);
  setTimeout(function(){ //also do this after any other visibility/dimension change
     google.maps.event.trigger(map,'resize');
  }, 500);
}

Answer 2

试试这个，对我有用google.maps.event.addListener(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); }); map.setZoom( map.getZoom() - 1 ); map.setZoom( map.getZoom() + 1 );

Google Maps API在ajax页面加载时显示灰色地图

2 个答案: