Bootstrap Nav Tabs и gmaps4rails

Question

Имея небольшую проблему с вкладками Bootstrap 2.3.2 Nav и центрируя маркер gmaps4rails. Я попробовал несколько решений безрезультатно. В настоящее время маркер находится совсем рядом с верхней левой стороной, как раз вне поля зрения в div.

Показать

<ul class="nav nav-pills"> 
      <li class="active"><a href="#seven" data-toggle="tab">Last 7 days</a></li> 
      <li><a href="#day" data-toggle="tab">Last 24 hours</a></li> 
      <li><a href="#month" data-toggle="tab">Last 30 days</a></li> 
      <li><a href="#location" data-toggle="tab">Location of <%= @soil_temperature.property %></a></li> 
     </ul> 

    <div class="tab-content"> 

     <div class="tab-pane active" id="seven" style="width: 100%;"> 
      <%= high_chart("chart", @sevendays) %> 
     </div> 

     <div class="tab-pane" id="day" style="width: 100%;"> 
      <%= high_chart("chart2", @day) %> 
     </div> 

     <div class="tab-pane" id="month" style="width: 100%;"> 
      <%= high_chart("chart3", @month) %> 
     </div> 

     <div class="tab-pane" id="location" style="width: 100%;"> 
      <div id="map" style='width: 100%; height: 600px;'></div> 
     </div> 

    </div> 

<script type="text/javascript"> 
    var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 }; 
    handler = Gmaps.build('Google'); 
    handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers(<%= raw @hash.to_json %>); 
    handler.map.centerOn(markers[0]); 
    handler.getMap().setZoom(8); 

     $('a[href="#location"]').on('shown', function(e) { 
      google.maps.event.trigger(map, "resize"); 
     }); 
    }); 
</script> 

Answer 1

Ok. Решил. Это было окончательное решение, которое работает с бутстрапом 2.3.2. Спасибо, что помогли аппендицировать.

<script type="text/javascript"> 

    $('a[href="#location"]').on('shown', function(e) { 
    var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 }; 
    handler = Gmaps.build('Google'); 
    handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){ 
    markers = handler.addMarkers(<%= raw @hash.to_json %>); 
    handler.map.centerOn(markers[0]); 
    handler.getMap().setZoom(8); 
    google.maps.event.trigger(map, "resize"); 
    }); 
    }); 

</script> 

Answer 2

Try:

<script type="text/javascript"> 
    function createMap(){ 
     var mapOptions = { mapTypeId: google.maps.MapTypeId.HYBRID, Zoom: 8 }; 
     handler = Gmaps.build('Google'); 
     handler.buildMap({ provider: mapOptions, internal: {id: 'map'}}, function(){ 
     markers = handler.addMarkers(<%= raw @hash.to_json %>); 
     handler.map.centerOn(markers[0]); 
     handler.getMap().setZoom(8); 
    } 
    $('a[href="#location"]').on('shown', function(e) { 
     createMap(); 
    }); 
    }); 
</script>