模态中的gmaps4rails不会加载全宽

Question

在bootstrap模式中加载gmaps4rails时，我遇到了rails 4，gmaps4rails 2的一些问题。 图像不会显示全宽，如下所示

如果我在浏览器上点击inspect元素，它会调整地图大小，一切都会好的。 我只是不确定如何让地图显示全宽！ 感谢

所有代码都在同一视图中

的link_to：

<%= link_to @trip.destination, trip_path(@trip),  {:remote => true, 'data-toggle' =>  "modal", 'data-target' => '#myModal', 'data-no-turbolink' => true , 'data-type' => "html", :class => "pull-right"}%>

模态：

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal"     aria-hidden="true">
    <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;              </button>
    <h4 class="modal-title" id="myModalLabel"><%=@trip.destination%></h4>
    </div>
    <div class="modal-body">
    <div style='width: 800px;'>
    <div id="map" style='width: 800px; height: 400px;'></div>
    </div>

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

</div>

脚本：

<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
 handler.getMap().setZoom(12);
});
</script>

Answer 1

尝试在显示模式后构建谷歌地图

$('#myModal').on('shown.bs.modal', function (e) { 
 handler = Gmaps.build('Google');
 handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
  handler.getMap().setZoom(12);
 });
});