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

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();
});

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

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

但这没有任何作用。

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

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

我还尝试按照this suggestion 将“异步延迟”添加到 api 脚本中。

这些建议都没有奏效，现在我来了。

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

Answer 1

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

2. 您究竟是什么时候尝试按照 geocodezip 的建议拨打google.maps.event.trigger(map,'resize'); 的？您需要在任何map-canvas div 的尺寸更改 (calculateHeight) 或地图可见性div 的任何更改之后调用它。如果map-canvas div，或者它的父级，或者它的父级的父级（任何前任）在某些时候设置了display:none，则地图视图将无法正确初始化，您只会看到灰色地图。还要将地图调整大小代码添加到某个超时中以确保，然后如果它有效则降低它，例如：

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 );