Google Maps API在Ajax页面加载中显示灰色地图

Question

I'm using ajax to load (into a div) the page that includes the Google map, however when it's finished loading it shows only a grey background for the map, with a Google logo in the bottom left, and a "Terms of use" link in the bottom right.

If I resize the window, then the map instantly appears . Also if I reload the entire page by pressing F5 the map loads normally. It's only when I initially load this map page using jQuery ajax that I get the grey map.

On the container page I load the maps api.

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

On the map page I do everything else.

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

On resize I recalculate the height so that it fills the full page. If I don't do this then the map opens with 1px height, though I don't know why. Could that be the same issue?

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

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

Since the map appears when the user resizes the window manually I thought programatically calling the resize event would have the same effect, so I added this:

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

But that did nothing.

I tried moving the api script to the map page but that caused a " You've loaded the same script multiple times " error if I load the page more than once, which then triggered other errors. However, with this setup I was able to load the map successfully using ajax after three page loads . In other words, after loading the container page once, I have to click on the menu item (that loads the map page) three times to get it to load properly. the first two times it still fails to load properly, but after that it loads properly every time, though with a load of JavaScript errors.

I also tried loading the api script asynchronously as per this suggestion .

I also tried adding "async defer" to the api script as per this suggestion .

Neither of these suggestions worked, and now I'm here.

What is causing the map to load with a grey background when the page is loaded via ajax, and what can I do about it?

Answer 1

1.Make sure map-canvas have width set in CSS.

2.When exactly did you try calling google.maps.event.trigger(map,'resize'); as geocodezip suggested? You need to call it after any map-canvas div's dimension change ( calculateHeight ) or any change to visibility of maps div . If the map-canvas div, or it's parent, or it's parent's parent (any predecessor) has display:none set at some point, the map view won't initialise properly and you will only see gray map. Also add the map resize code into some timeout to be sure, and then lower it if it works, eg:

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

Try this, which worked for me 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 );