谷歌地图不加载完全地

Question

这里是我的代码

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script> 
<script> 
    function initialize() { 
     var myLatlng = new google.maps.LatLng(-33.8688, 151.2195); 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.8688, 151.2195), 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map_auto'), mapOptions); 

     var input = document.getElementById('event_input_auto'); 
     var autocomplete = new google.maps.places.Autocomplete(input); 

     autocomplete.bindTo('bounds', map); 

     var infowindow = new google.maps.InfoWindow(); 
     marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map 
     }); 

     /*new added*/ 
     google.maps.event.addListener(map, 'center_changed', function() { 
      var location = map.getCenter(); 
      //new added 
      placeMarker(location); 
      displayLocation(location.lat(),location.lng()); 

     }); 
     google.maps.event.addListener(map, 'zoom_changed', function() { 
      zoomLevel = map.getZoom();  
     }); 
     google.maps.event.addListener(marker, 'dblclick', function() { 
      zoomLevel = map.getZoom()+1; 
      if (zoomLevel == 20) { 
       zoomLevel = 10; 
      } 
      map.setZoom(zoomLevel); 

     }); 


     /*new added*/ 


     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      $('#map_holder').show(); 
      google.maps.event.addListenerOnce(map, 'idle', function(){ 
       google.maps.event.trigger(map, 'resize'); 
       map.setCenter(location); 
      }); 


      infowindow.close(); 
      var place = autocomplete.getPlace(); 
      if (place.geometry.viewport) { 
       map.fitBounds(place.geometry.viewport); 
      } else { 
       map.setCenter(place.geometry.location); 
       map.setZoom(17); // Why 17? Because it looks good. 
      } 
      //alert(autocomplete.getBounds()); 
      var image = new google.maps.MarkerImage(
       place.icon, new google.maps.Size(71, 71), 
       new google.maps.Point(0, 0), new google.maps.Point(17, 34), 
       new google.maps.Size(35, 35)); 
      marker.setIcon(image); 
      marker.setPosition(place.geometry.location); 

      var address = ''; 
      if (place.address_components) { 
       address = [ 
       (place.address_components[0] && 
       place.address_components[0].short_name || ''), 
       (place.address_components[1] && 
       place.address_components[1].short_name || ''), 
       (place.address_components[2] && 
       place.address_components[2].short_name || '')].join(' '); 
      } 

      infowindow.setContent('<div><b>' + place.name + '</b><br>' + address); 
      infowindow.open(map, marker); 
     }); 

     // Sets a listener on a radio button to change the filter type on Places 
     // Autocomplete. 
     var setupClickListener = function(id, types) { 
     var radioButton = document.getElementById(id); 
     google.maps.event.addDomListener(radioButton, 'click', function() { 
      autocomplete.setTypes(types); 
     }); 
     } 

     setupClickListener('changetype-all', []); 
     //setupClickListener('changetype-establishment', ['establishment']); 
     //setupClickListener('changetype-geocode', ['geocode']); 
    } 
google.maps.event.addDomListener(window, 'load', initialize); 

function placeMarker(location) {  
    var clickedLocation = new google.maps.LatLng(location); 
    marker.setPosition(location); 
} 

function displayLocation(latitude,longitude){ 
    var request = new XMLHttpRequest(); 

    var method = 'GET'; 
    var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+','+longitude+'&sensor=true'; 
    var async = true; 

    request.open(method, url, async); 
    request.onreadystatechange = function(){ 
     if(request.readyState == 4 && request.status == 200){ 
     var data = JSON.parse(request.responseText); 
     var address = data.results[0]; 
     //document.write(address.formatted_address); 
     document.getElementById("event_input_auto").value = address.formatted_address; 
     } 
    }; 
    request.send(); 
}; 


</script> 

<input type="text" name="location" class="input-xxlarge required" id="event_input_auto" value="" /> 
<div id="map_holder" style="display: none;"> 
<div id="map_auto" style="height: 300px; width: 800px;" ></div> 
</div> 

地图加载完全当#map_holder是display:block

但我需要的时候#map_holder是display:none加载地图。这是我的要求。

我需要做什么才能完全加载地图？

Answer 1

从文档

调整大小 - 开发人员应在地图上触发该事件时，DIV 变化大小：google.maps.event.trigger（地图， '调整大小'）。

所以尽量google.maps.event.trigger(map, 'resize')更改显示后阻断

Answer 2

从文档大小调整 - 开发人员应在地图上触发该事件

google.maps.event.addListenerOnce(map, 'idle', function(){ 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(location); 
}); 

添加上面的代码仅低于

$('#map_holder').show();