map not centering with bootstrap tabbed panel

[bodaonline]

Hi,

I have a working RoR4 app with working gmaps4rails. It was centering nicely an autozooming was fine too. Then I wraped bootstrap tabbed panel around it and the map just went grey. Fixed that but it won't center now. Have been googling + trying solutions for 4 hours now :) This how it is now:

<div role='tabpanel' class="tab-pane fade" id="mapview">
  <div class="row" id="row1">
    <div class="col-md-9" style="padding: 15px">
      <div id="map"></div>
      <script type="text/javascript">
      handler = Gmaps.build('Google', { markers: { maxRandomDistance: 2, clusterer: {gridSize: 50, maxZoom: 20} } });
      handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
      markers = handler.addMarkers(<%=raw @hash.to_json %>);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      handler.getMap().setZoom(7);
     });
     $("#mapTab").on('shown.bs.tab', function() {
        google.maps.event.trigger(map, 'resize');
     });
     </script>
    </div>
    <div class="col-md-3" id="right-column" style="padding: 15px">
      <%= render 'rightcol' %>
    </div>
  </div>
</div>`

TIA!

[apneadiving]

Its because the div where the map is supposed to live isnt visible on map instantiation. You should create the map after its div is made visible

On 8 June 2016 at 11:02:25, bodaonline (notifications@github.com) wrote:

Hi,

I have a working RoR4 app with working gmaps4rails. It was centering nicely an autozooming was fine too. Then I wraped bootstrap tabbed panel around it and the map just went grey. Fixed that but it won't center now. Have been googling + trying solutions for 4 hours now :) This how it is now:

```

<%= render 'rightcol' %>

` TIA! — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apneadiving/Google-Maps-for-Rails/issues/520, or mute the thread https://github.com/notifications/unsubscribe/AAPHH_1-1CH2fG2yt1EiyhcgTNqJbXKwks5qJoUegaJpZM4Iwvcn .

[bodaonline]

Oh, wow quick reply, thx! Found this tutorial and tried and failed to implement it. No error messages but also no map at all.

this is in the head (when I load the page and view the source I see that the addMarkers bit is populated with lat-long values correctly):

<script>
function initialize() {
var initialize;
initialize = function() {
var handler;
handler = Gmaps.build('Google', { markers: { maxRandomDistance: 2, clusterer: {gridSize: 50, maxZoom: 20} } });
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
  handler.getMap().setZoom(7);
  });
 };
 }
 google.maps.event.addDomListener(window, 'page:load', initialize);
</script>

And this in the body:

<div role='tabpanel' class="tab-pane fade" id="mapview">
  <div class="row" id="row1">
    <div class="col-md-9" style="padding: 15px">
      <div id="map"></div>
    </div>
    <div class="col-md-3" id="right-column" style="padding: 15px">
      <%= render 'rightcol' %>
    </div>
  </div>
</div>

What am I missing (apart from knowing JS)? :)

[bodaonline]

Found the solution here: https://github.com/kenwheeler/slick/issues/187 Used the first one from patrickvaillancourt: /* bootstrap hack: fix content width inside hidden tabs / .tab-content > .tab-pane, .pill-content > .pill-pane { display: block; / undo display:none / height: 0; / height:0 is also invisible / overflow: hidden; / no-overflow / } .tab-content > .active, .pill-content > .active { height: auto; / let the content decide it / } / bootstrap hack end */