javascript - 模态中的 gmaps4rails 不会加载全宽

Question

在引导模式中加载 gmaps4rails 时，rails 4 和 gmaps4rails 2 有一些问题。图像不会显示全宽，如下所示

如果我在浏览器上点击检查元素，它会调整 map 的大小，一切都会好起来的。我只是不确定如何让 map 显示全宽!谢谢

所有代码都在同一个 View 中

链接到:

<%= 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);
 });
});