如何調整API谷歌地圖的模式，以避免灰屏

Question

首先對不起我的英語

我與調整大小API谷歌地圖在模式有點問題，我已經檢查了好後，我們必須把「google.maps.event.trigger（{map}，'resize'）;」避免灰屏

但對我來說一點兒也不工作，我一直在灰色的屏幕，這個消息是絕對的，我問你的幫助

我希望把我的代碼上的jsfiddle，但我有小失誤所以我把這裏

<link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" > <!-- Optional theme --> 
    <link rel= "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity= "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin= "anonymous" > <!-- Latest compiled and minified JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity= "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin= "anonymous" ></script> 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap" 
     async defer> 
</script> 

<style> 

    .pac-container { 
      z-index: 1051 !important; 
     } 

     #map { 
      width:auto; 
      height:480px; 
      overflow:visible; 
      display: block; 
     } 

     .modal-dialog { 
      position: relative; 
      width: auto; 
      margin: 60px auto; 
      max-width: 1000px; 
      /*z-index: 1500;*/ 
     } 


</style> 









<!-- Modal j'achete je loue--> 
    <div class="modal fade" id="myModalMap" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
    <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 

       <h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-md-12 col-xs-12"> 
         <div class="well"> 
          <div id="divTopRigth" class="text-right"></div> 

          <h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1> 


    <div id="locationField"> 
     <input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" /> 
    </div> 
    <br> 
    <div id="map"></div> 





         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 

<button id="openmap">open map</button> 

<script> 
     $("#openmap").on('click',function(){ 


       ShowModalMap(); 


     }); 


    function ShowModalMap(){ 

    $('#myModalMap').appendTo("body").modal("show"); 

      //initMap(); 

} 


     </script> 

      <script> 


      //google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); 


     </script> 

<script> 


var placeSearch, autocomplete; 
var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml'; 


function initMap() { 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: {lat: 50.8503, lng: 4.3517}, 
    zoom:7 
    }); 

    google.maps.event.trigger(map, 'resize'); 
var input = /** @type {!HTMLInputElement} */(document.getElementById('autocomplete')); 
loadKmlLayer(src, map); 

var options = { 
    componentRestrictions: {country: "be"} 
}; 

    var autocomplete = new google.maps.places.Autocomplete(input,options); 
    autocomplete.bindTo('bounds', map); 


    autocomplete.addListener('place_changed', function() { 

    var place = autocomplete.getPlace(); 
    if (!place.geometry) { 
     window.alert("Autocomplete's returned place contains no geometry"); 
     return; 
    } 

    // If the place has a geometry, then present it on a map. 
    if (place.geometry.viewport) { 
     map.fitBounds(place.geometry.viewport); 
     map.setZoom(14); 
    } else { 
     map.setCenter(place.geometry.location); 
     map.setZoom(16); 
    } 

    }); 



    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     map.zoom(13); 
    }, function() { 

    }); 
    } else { 

    } 

      function loadKmlLayer(src, map) { 
     var kmlLayer = new google.maps.KmlLayer(src, { 


      map: map 
     }); 
     } 


} 



     </script> 

在此先感謝

Answer 1

使用此：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

    <script> 
     var placeSearch, autocomplete; 
     var src = 'http://149.202.171.217/cerp/V11/wp-content/themes/nouveau/FunctionAdd/test.kml'; 
     $(document).ready(function() { 
      $("#openmap").on('click', function() { 
       ShowModalMap(); 
      }); 

      function ShowModalMap() { 
       //alert(1); 
       $('#myModalMap').appendTo("body"); 
       $('#myModalMap').modal("show"); 
       initMap(); 
      } 
      $('#myModalMap').on('shown.bs.modal', function() { 
       google.maps.event.trigger(map, "resize"); 
      }); 

     }); 
     function initMap() { 

      var map = new google.maps.Map(document.getElementById('map'), { 
       center: { lat: 50.8503, lng: 4.3517 }, 
       zoom: 7 
      }); 
      loadKmlLayer(src, map); 
      //var resize = new google.maps.event.trigger(map, 'resize'); 
      var input = (document.getElementById('autocomplete')); 
      var options = { 
       componentRestrictions: { country: "be" } 
      }; 

      var autocomplete = new google.maps.places.Autocomplete(input, options); 
      autocomplete.bindTo('bounds', map); 


      autocomplete.addListener('place_changed', function() { 

       var place = autocomplete.getPlace(); 
       if (!place.geometry) { 
        window.alert("Autocomplete's returned place contains no geometry"); 
        return; 
       } 

       // If the place has a geometry, then present it on a map. 
       if (place.geometry.viewport) { 
        map.fitBounds(place.geometry.viewport); 
        map.setZoom(14); 
       } else { 
        map.setCenter(place.geometry.location); 
        map.setZoom(16); 
       } 

      }); 

      // Try HTML5 geolocation. 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(function (position) { 
        var pos = { 
         lat: position.coords.latitude, 
         lng: position.coords.longitude 
        }; 
        var infoWindow = new google.maps.InfoWindow({ 
         content: '', 
         maxWidth: 400 
        }); 
        infoWindow.setPosition(pos); 
        infoWindow.setContent('Location found.'); 
        map.setCenter(pos); 
        map.setZoom(13); 
       }, function() { 

       }); 
      } else { 

      } 
     } 
     function loadKmlLayer(src, map) { 
      var kmlLayer = new google.maps.KmlLayer(src, { 
       suppressInfoWindows: true, 
       preserveViewport: false, 
       map: map 
      }); 
     } 

     //setTimeout(function() { 
     // loadKmlLayer(src, map); 
     //}, 10000); 
     //} 

     //google.maps.event.trigger({map}, 'resize'); {map}.setCenter({marker}.getPosition()); 
    </script> 
    <style> 
     .pac-container { 
      z-index: 1051 !important; 
     } 

     #map { 
      width: auto; 
      height: 480px; 
      overflow: visible; 
      display: block; 
     } 

     .modal-dialog { 
      position: relative; 
      width: auto; 
      margin: 60px auto; 
      max-width: 1000px; 
      /*z-index: 1500;*/ 
     } 
    </style> 
</head> 
<body> 
    <!-- Modal j'achete je loue--> 
    <div class="modal fade" id="myModalMap" role="dialog"> 
     <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> 

        <h4 class="modal-title" id="myModalLabel">J'achete, je loue</h4> 
       </div> 
       <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12 col-xs-12"> 
          <div class="well"> 
           <div id="divTopRigth" class="text-right"></div> 

           <h1 id="TitleHistorique" class="text-center">Trouver un point de vente</h1> 


           <div id="locationField"> 
            <input id="autocomplete" class="form-control" placeholder="Entrer une rue" type="text" /> 
           </div> 
           <br> 
           <div id="map"></div> 

          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

    <button id="openmap">open map</button> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDkWExAooGaEJGyNuOhaUb6Z-OGDxvgnxM&libraries=places&callback=initMap" async defer></script> 
</body> 

</html>