谷歌地圖內模態不顯示

我有一個模式，當它被點擊時地圖顯示，但地圖不起作用，而是顯示一個灰色的圖像。谷歌地圖內模態不顯示

<button class="btn" data-toggle="modal" data-target="#myModal" onclick="resize()">Show Modal</button> 
    <!--MODAL--> 
    <div id="myModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Warning!</h4> 
       </div> 
       <div class="modal-body" id="modal-body"> 

        <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
        <div id="map" style="width: 580px; height:400px"></div> 
       </div> 
       <div class="modal-footer" id="modal-footer"> 

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

我的srcipt是從google自動完成的地方，當地圖不在模式內時，它工作得很好。

<script> 
      // This example adds a search box to a map, using the Google Place Autocomplete 
      // feature. People can enter geographical searches. The search box will return a 
      // pick list containing a mix of places and predicted search terms. 

      // This example requires the Places library. Include the libraries=places 
      // parameter when you first load the API. For example: 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
var map; 

      function initAutocomplete() { 
       map = new google.maps.Map(document.getElementById('map'), { 
        center: {lat: -33.8688, lng: 151.2195}, 
        zoom: 13, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       // Create the search box and link it to the UI element. 
       var input = document.getElementById('pac-input'); 
       var searchBox = new google.maps.places.SearchBox(input); 
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

       // Bias the SearchBox results towards current map's viewport. 
       map.addListener('bounds_changed', function() { 
        searchBox.setBounds(map.getBounds()); 
       }); 

       var markers = []; 
       // Listen for the event fired when the user selects a prediction and retrieve 
       // more details for that place. 
       searchBox.addListener('places_changed', function() { 
        var places = searchBox.getPlaces(); 

        if (places.length == 0) { 
         return; 
        } 

        // Clear out the old markers. 
        markers.forEach(function (marker) { 
         marker.setMap(null); 
        }); 
        markers = []; 

        // For each place, get the icon, name and location. 
        var bounds = new google.maps.LatLngBounds(); 
        places.forEach(function (place) { 
         var icon = { 
          url: place.icon, 
          size: new google.maps.Size(71, 71), 
          origin: new google.maps.Point(0, 0), 
          anchor: new google.maps.Point(17, 34), 
          scaledSize: new google.maps.Size(25, 25) 
         }; 

         // Create a marker for each place. 
         markers.push(new google.maps.Marker({ 
          map: map, 
          icon: icon, 
          title: place.name, 
          position: place.geometry.location 
         })); 

         if (place.geometry.viewport) { 
          // Only geocodes have viewport. 
          bounds.union(place.geometry.viewport); 
         } else { 
          bounds.extend(place.geometry.location); 
         } 
        }); 
        map.fitBounds(bounds); 
       }); 

      } 

function resize(){ 

      $('#myModal').on('shown', function() { 
       google.maps.event.trigger(map, "resize"); 
      }); 
} 

     </script>

我試着這樣做Similar Question，但它給我

Uncaught ReferenceError: $ is not defined

 // This example adds a search box to a map, using the Google Place Autocomplete 
 
      // feature. People can enter geographical searches. The search box will return a 
 
      // pick list containing a mix of places and predicted search terms. 
 

 
      // This example requires the Places library. Include the libraries=places 
 
      // parameter when you first load the API. For example: 
 
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> 
 
      var map; 
 

 
      function initAutocomplete() { 
 
       map = new google.maps.Map(document.getElementById('map'), { 
 
        center: {lat: -33.8688, lng: 151.2195}, 
 
        zoom: 13, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }); 
 

 
       // Create the search box and link it to the UI element. 
 
       var input = document.getElementById('pac-input'); 
 
       var searchBox = new google.maps.places.SearchBox(input); 
 
       map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 

 
       // Bias the SearchBox results towards current map's viewport. 
 
       map.addListener('bounds_changed', function() { 
 
        searchBox.setBounds(map.getBounds()); 
 
       }); 
 

 
       var markers = []; 
 
       // Listen for the event fired when the user selects a prediction and retrieve 
 
       // more details for that place. 
 
       searchBox.addListener('places_changed', function() { 
 
        var places = searchBox.getPlaces(); 
 

 
        if (places.length == 0) { 
 
         return; 
 
        } 
 

 
        // Clear out the old markers. 
 
        markers.forEach(function (marker) { 
 
         marker.setMap(null); 
 
        }); 
 
        markers = []; 
 

 
        // For each place, get the icon, name and location. 
 
        var bounds = new google.maps.LatLngBounds(); 
 
        places.forEach(function (place) { 
 
         var icon = { 
 
          url: place.icon, 
 
          size: new google.maps.Size(71, 71), 
 
          origin: new google.maps.Point(0, 0), 
 
          anchor: new google.maps.Point(17, 34), 
 
          scaledSize: new google.maps.Size(25, 25) 
 
         }; 
 

 
         // Create a marker for each place. 
 
         markers.push(new google.maps.Marker({ 
 
          map: map, 
 
          icon: icon, 
 
          title: place.name, 
 
          position: place.geometry.location 
 
         })); 
 

 
         if (place.geometry.viewport) { 
 
          // Only geocodes have viewport. 
 
          bounds.union(place.geometry.viewport); 
 
         } else { 
 
          bounds.extend(place.geometry.location); 
 
         } 
 
        }); 
 
        map.fitBounds(bounds); 
 
       }); 
 

 
      } 
 

 

 

 

 
$(document).ready(function() { 
 
       $('#myModal').on('shown', function() { 
 
        google.maps.event.trigger(map, "resize"); 
 
       }); 
 
      });

<!DOCTYPE html> 
 
<html> 
 
    <body> 
 
     <body> 
 
     <button class="btn" data-toggle="modal" data-target="#myModal"/>Show Modal</button> 
 
     <!--MODAL--> 
 
     <div id="myModal" class="modal fade" role="dialog"> 
 
      <div class="modal-dialog"> 
 
       <div class="modal-content"> 
 
        <div class="modal-header"> 
 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
         <h4 class="modal-title">Warning!</h4> 
 
        </div> 
 
        <div class="modal-body" id="modal-body"> 
 

 
         <input id="pac-input" class="controls" type="text" placeholder="Search Box"> 
 
         <div id="map" style="width: 580px; height:400px"></div> 
 
        </div> 
 
        <div class="modal-footer" id="modal-footer"> 
 

 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyADR3ipXgTLZd7uIcl3NBUujxF3kKp9rFk&libraries=places&callback=initAutocomplete" 
 
     async defer></script> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      
 
      </body> 
 
</html>

來源

2016-07-15 SCS

您收到的錯誤聲明「jQuery」未正確包含在您的項目中。 –

對於我的代碼沒有錯誤，但是當我嘗試在鏈接問題中添加「答案」時，那是錯誤發佈時的情況。 – SCS

var map; 

function initAutocomplete() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -33.8688, lng: 151.2195}, 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    // .... 
} 
$(function() { 
    $('#myModal').on('shown', function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 
});

你包裹

google.maps.event.trigger(map, "resize");

內function resize() {}永遠不會執行的。嘗試使用jQuery的$(document).ready(function(){});來代替它。

來源

2016-07-15 11:31:06

非常感謝你的工作。 – SCS

有一個新的錯誤。當我把谷歌api導入之前的jquery導入它不會工作，如果它是在谷歌API後...它工作，但會有一個未捕獲的ReferenceError .. – SCS

你能提供一個jsFiddle與你的代碼？這是唯一的方式有人可以幫助你調試你的代碼 –

這種FO錯誤（$沒有定義）指你還沒有初始化一個jav ascript庫在你的代碼。

，當你正在使用：

$('#myModal').on('shown', function() { 
      google.maps.event.trigger(map, "resize"); 
     });

，你需要在你的腳本的頂部添加jQuery的。事情是這樣的：

你會發現這裏的信息：w3schools jquery init

開始通過解決JS錯誤和可能的地圖將會加載。

來源

2016-07-15 10:37:31

沒有爲目前的代碼沒有錯誤，但如果我試圖在鏈接的問題的答案..它會返回該錯誤。 – SCS

問題是，如果初始化到具有display：的組件中，那麼無法顯示映射：在映射init時間內沒有映射。因此，在on（'shown'）函數中，您需要調用google map的init（）函數。 –

谷歌地圖內模態不顯示

回答

相關問題