Issue with Bootstrap 3 tabs

[conexionagenciadigital]

I'm using gmaps4rails and Bootstrap on a rails app to add a map in a model's show view. The map goes inside a tab using Bootstrap JS tabs. However, the map doesn't gets displayed correctly, it just shows a corner and the center is outside the map div. I've tried to do google.maps.event.trigger(map, 'resize'); according to Stackoverflow, but haven't being able to fix it yet. Any thoughts?

[apneadiving]

You should create the map once tab is activated. Google is looking for the size of the element, so if its not visible the result is not aceptable

[conexionagenciadigital]

Awesome!

I finally moved your code to a createMap() function which gets called once the tab is shown:

// Google maps 4 rails function createMap(){ 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(13);
        }); 
};

$("#myTab a[href='#location'").on('shown.bs.tab',function(){
    createMap();
});

Thanks a lot, super fast response!