1

ブートストラップ モーダルで gmaps4rails をロードするときに、Rails 4 と gmaps4rails 2 に問題があります。以下に示すように、画像は全幅で表示されません ここに画像の説明を入力

ブラウザで要素を検査すると、マップのサイズが変更され、すべて問題ありません。マップを全幅で表示する方法がわかりません! ありがとう

すべてのコードは同じビューにあります

リンク先:

<%= 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>
4

1 に答える 1

4

モーダルが表示されたら、Google マップを作成してみてください

$('#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);
 });
});
于 2014-05-18T01:37:12.737 に答える