Google Maps API在Ajax頁面加載中顯示灰色地圖

Question

我正在使用Ajax加載（包括div在內）包含Google地圖的頁面，但是加載完成后，它僅顯示該地圖的灰色背景，並在左下方顯示Google徽標，並顯示“使用條款” ”）。

如果我調整窗口大小，則地圖會立即出現 。 另外，如果我按F5重新加載整個頁面，則地圖將正常加載。 僅當我最初使用jQuery ajax加載此地圖頁面時，我才獲得灰色地圖。

在容器頁面上，我加載了maps 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錯誤，但每次都可以正確加載。

我還嘗試按照此建議異步加載api腳本。

我還嘗試按照此建議在api腳本中添加“異步延遲”。

這些建議都不起作用，現在我在這里。

通過ajax加載頁面時，導致地圖以灰色背景加載的原因是什么，我該怎么辦？

Answer 1

1.確保map-canvas具有width在CSS設置。

2.您何時確切嘗試致電google.maps.event.trigger(map,'resize'); 如geocodezip建議？ 你不需要任何后打電話到其map-canvas div的尺寸變化（ calculateHeight ）或將地圖的可見性的任何變化div 。 如果map-canvas格，或者它的父，或它的父的父（任何前身）具有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 ); google.maps.event.addListener(map, 'idle', function() { google.maps.event.trigger(map, 'resize'); }); map.setZoom( map.getZoom() - 1 ); map.setZoom( map.getZoom() + 1 );