如何在Bootstrap模式3中正确显示Google Map

如何解决如何在Bootstrap模式3中正确显示Google Map

我有以下JavaScript代码可以成功在Google Map中显示内容：

    <div id="map"></div>

    <script>
      var customLabel = {

        hs: {
          label: 'house'
        }
       

      };

 
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'),{
          center: new google.maps.LatLng(-33.863276,151.207977),zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('map.PHP',function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers,function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');

              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),parseFloat(markerElem.getAttribute('lng')));


              var infowincontent = document.createElement('div');
             var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};

              var marker = new google.maps.Marker({
                map: map,position: point,label: icon.label,title : 'welcome'
              });
              marker.addListener('click',function() {
                //infoWindow.setContent(infowincontent);
infoWindow.setContent('<b>'+name + "</b><br>" + address);
                infoWindow.open(map,marker);
              });
            });
          });
        }



      function downloadUrl(url,callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = donothing;
            callback(request,request.status);
          }
        };

        request.open('GET',url,true);
        request.send(null);
      }

      function donothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=api-key-goes-here&callback=initMap">
    </script>

这是我的问题：：当我尝试在bootstrap 3模式中显示google map时，但单击该模式时不显示任何内容。

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">show map</button>


  <div class="modal fade" id="myModal" 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">display Google Map</h4>
        </div>
        <div class="modal-body">
        

<!--google map starts here-->


    <div id="map"></div>

    <script>
      var customLabel = {

        hs: {
          label: 'house'
        }
       

      };

 
        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'),true);
        request.send(null);
      }

      function donothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=api-key-goes-here&callback=initMap">
    </script>


<!--google map ends here-->





        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>

解决方法

通过添加 #map div的大小并初始化 shown.bs.modal 中的 initmap（）函数来解决此问题物产

#map {
  width:500px;
  height:500px;
}



$("#myModal").on("shown.bs.modal",function () {initMap();});