[Fixed] google map isn’t loading in bootstrap tabs

So in the post I’m going to explain the another real word issue I faced while develop a application with google map and twitter bootstrap 3 tabs.

So I have two tabs in my application one for picture and another for map. So the image was working fine, But when I click on the map tab to load the map it was showing the map but blank or sort of not showing at all. I did some research and found it’s issue with tabs.

how to fix map not loading with bootstrap tabs

Below code will help you to make it working, please make sure you change the href value with your tab href.

 $("a[href='#map']").on('shown.bs.tab', function () {
            google.maps.event.trigger(map, 'resize');
            map.setCenter(defaultCenter);
        });

This will make it working 100%. Please don’t forgot to share or comment it help you out.

Cheers..

Posted by | View Post | View Group