谷歌地图没有以模态显示!!但是在调整窗口大小后出现

Question

我在Twitter bootstrap模式中使用谷歌地图，但是，当模态打开谷歌地图灰色框出现没有地图，但当我通过单击恢复向下图标调整我的铬窗口时，它出现。而且当我在该地图保留之后再次最大化窗口。

javascript代码

var map;        
var myCenter = new google.maps.LatLng(28.6, 77.2);
var marker = new google.maps.Marker({
    position: myCenter,
    title:'Move to select location' ,
    draggable:true,
});
function gmap_canvas() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: true,
      scrollwheel: true,
     // disableDefaultUI:true,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);   
  google.maps.event.addListener(marker, 'click', function() {     
    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};
google.maps.event.addDomListener(window, 'load', gmap_canvas);
google.maps.event.addDomListener(window, "resize", resizingMap());
$('#book-modal').on('show.bs.modal', function() {
   //Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
   resizeMap();
})
function resizeMap() {
   if(typeof map =="undefined") return;
   setTimeout( function(){resizingMap();} , 400);
}
function resizingMap() {
   if(typeof map =="undefined") return;
   var center = map.getCenter();
   google.maps.event.trigger(map, "resize");
   map.setCenter(center); 
}

Html代码

                <div class="col-sm-8">
                    <div id="map-canvas">
                    </div> 
               </div>

Answer 1

您可能无法加载Google地图＆gt;将其添加到JS的末尾。

google.maps.event.addDomListener(window, 'load', initialize);

var map;
var myCenter = new google.maps.LatLng(53, -1.33);
var marker = new google.maps.Marker({
  position: myCenter
});

function initialize() {
  var mapProp = {
    center: myCenter,
    zoom: 14,
    draggable: false,
    scrollwheel: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  });
}
google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addDomListener(window, "resize", resizingMap());

$('#myMapModal').on('show.bs.modal', function() {
  //Must wait until the render of the modal appear, thats why we use the resizeMap and NOT resizingMap!! ;-)
  resizeMap();
});

function resizeMap() {
  if (typeof map == "undefined") return;
  setTimeout(function() {
    resizingMap();
  }, 400);
}

function resizingMap() {
  if (typeof map == "undefined") return;
  var center = map.getCenter();
  google.maps.event.trigger(map, "resize");
  map.setCenter(center);
}
initialize();

html,
body,
#map-canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}
#map-canvas {
  width: 500px;
  height: 480px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a href="#myMapModal" class="btn" data-toggle="modal">Launch Map Modal</a>

<div class="modal fade" id="myMapModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>

      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div id="map-canvas" class=""></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->