Bootstrap 导航选项卡和 gmaps4rails答案

【问题标题】：Bootstrap Nav Tabs and gmaps4railsBootstrap 导航选项卡和 gmaps4rails
【发布时间】：2014-09-15 04:46:48
【问题描述】：

Bootstrap 2.3.2 导航选项卡和我的 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>

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap ruby-on-rails-3.2 gmaps4rails twitter-bootstrap-2

【解决方案1】：

试试：

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

【讨论】：

感谢您的快速响应。当我应用上面的代码时，我得到一个空白选项卡。
奇怪，看这里：github.com/apneadiving/Google-Maps-for-Rails/issues/454
啊，我认为这里的细微差别是我使用的是引导程序 2.3.2，而该用户使用的是 3。

【解决方案2】：

好的。解决了。这是适用于引导程序 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>

【讨论】：