Google map with bootstrap tab's problem

JavaScript
1

I bought a google directional map script. When using bootstrap, the map only shown small portion.

I was told it may be fixed using resize.

Any help to fix it. I search around such problem and found many ppl facing it( Not with this map script)

http://bestjob.my/mod/Gmap_Geo/

2

After reading various SO threads (like this one and [URL=“http://stackoverflow.com/questions/6455536/google-maps-api-v3-jquery-ui-tabs-map-not-resizing”]this one) and [URL=“http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448”]this Gmaps-Api-Issues thread, I was able to hobble together something that seems to work. Probably not the most elegant solution, but try adding this to your site:

<script>
    $(document).ready(function() {
        $('a[href="#tab2"]').click(function(e) {
            setTimeout(initialise, 1000);
        });

        function initialise() {
            var myMap = document.getElementById('map-myid1');
            google.maps.event.trigger(myMap, 'resize');
        };
    });
</script>
3

Hi alouty,

This worked for me in Chrome, but I’ve not tested it in other browsers - put this js just before your </body> tag:


<script type="text/javascript">
$(function(){
    $(".nav-tabs").on("shown", function(e){
        if (e.target.hash === '#tab2') {
            google.maps.event.trigger(document.getElementById("map-myid1"), 'resize');
        }
    });
});
</script>

Edit: beaten to it again :wink:

4

Thanks. It worked.

5

Do you know how to make marker center in the map? Now the marker hide outside of the map at right side.