0

On my Rails 4 application I added a location to my main foo object and tried to add Google-Maps-for-Rails to visualize it. After following the instruction on the gem page everything worked well and it still does.

I also added the JS-tabs of bootstrap and this works well by itself too.

But as soon as I put the embed code of googlemaps into a tab that is not activated on the initial page it won't launch by itself. After pressing F12 (Firefox Developer Console) it gets activated and works as intended.

This is how the view looks:

<ul class='nav nav-tabs' role='tablist'>
  <li role='presentation' class='active'><a href='#allgemein' aria-controls='allgemein' role='tab' data-toggle='tab'>Beschreibung</a></li>
  <li role='presentation'><a href='#location' aria-controls='location' role='tab' data-toggle='tab'>Lage</a></li>
</ul>

<div class='tab-content'>
  <div role='tabpanel' class='tab-pane fade in active' id='allgemein'>
    SOME INFOS
  </div>

  <div role='tabpanel' class='tab-pane fade' id='location'>
    LOCATION
    <div style='width: 800px;'>
      <div id="map" style='width: 800px; height: 400px;'></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(10);
      });
    </script>
  </div>
</div>

Any ideas why this occurs?

SOLUTION:

Found the solution with the help of preciz!

$('#tab_location').on('shown.bs.tab', function (e) {
  google.maps.event.trigger(map, 'resize');
});
Syk
  • 393
  • 4
  • 19

1 Answers1

1

Had the same issue, but can't check how I solved it, cause I don!t have the codebase. But the solution was to trigger a rerender/redraw of the map before showing it.

I think you can find a solution on SO.

Check answers here: How do I force redraw

Community
  • 1
  • 1
Barna Kovacs
  • 1,226
  • 1
  • 14
  • 35