谷歌地图内模态不显示

问题描述：

我有一个模式，当它被点击时地图显示，但地图不起作用，而是显示一个灰色的图像。谷歌地图内模态不显示

<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>

您收到的错误声明“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(){});来代替它。

非常感谢你的工作。 – 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错误和可能的地图将会加载。

没有为目前的代码没有错误，但如果我试图在链接的问题的答案..它会返回该错误。 – SCS

问题是，如果初始化到具有display：的组件中，那么无法显示映射：在映射init时间内没有映射。因此，在on（'shown'）函数中，您需要调用google map的init（）函数。 –

谷歌地图内模态不显示

相关推荐