CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapruby-on-rails-3.2gmaps4railstwitter-bootstrap-2
DollarChills
DollarChills

Reputation: 1086

Bootstrap Nav Tabs and gmaps4rails

Having a slight issue with Bootstrap 2.3.2 Nav tabs and centring on my gmaps4rails marker. I have tried several solutions to no avail. At present the marker is just off to the top left hand side, just out of view in the div.

Show

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

Upvotes: 0

Views: 242

Answers (2)

DollarChills
DollarChills

Reputation: 1086

Ok. Solved it. This was this final solution that works with bootstrap 2.3.2. Thanks for you help apneadiving.

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

Upvotes: 0

apneadiving
apneadiving

Reputation: 115541

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>

Upvotes: 2

Related Questions