gmaps4rails in modal won't load full width

I have some issues with rails 4 ,gmaps4rails 2 when loading gmaps4rails in a bootstrap modal. image would not display full width as shown below

if I hit inspect element on my browser it would resize the map and everything will be fine. I'm just not sure how to get the map to show full width! thanks

all the code is in same view

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"}%>

modal:

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

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

Try to build the google maps once the modal is shown

$('#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);
 });
});