Google map not center after resize in Bootstrap Tab

JavaScript
1

I have issue same as Issue 1448: Bug: API v3 needs a checkResize() function (or equivalent) where my map not fully loaded and not center.
I have marker but after resize it moved to top left (hidden). Just move a little bit and u can see it.:mad:

Pls read post #23 for more info.

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

Ref:
http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
http://kalpeshlets.wordpress.com/2013/01/29/jquery-ui-tab-and-google-map-display-problem-resize-and-center/
http://stackoverflow.com/questions/8558226/recenter-a-google-map-after-container-changed-width
http://stackoverflow.com/questions/7084363/google-maps-in-hidden-div
http://stackoverflow.com/questions/4064275/how-to-deal-with-google-map-inside-of-a-hidden-div-updated-picture

I need to add setcenter to resize code below:

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

        function initialise() {
            var myMap = document.getElementById('map-myid1');
            google.maps.event.trigger(myMap, 'resize');
myMap.setZoom( myMap.getZoom() );
        };
    });

Pls help to fix it.

2

Hi alouty,

I think the problem is getting the google map object - I don’t think you can retrieve it just from the DOM element. The code that controls the map, /mod/Gmap_Geo/js/map.min.js, is there a website/docs for it?

3

PMed u.

4

Hi,

Thanks for sending me the info. I think I’ve got a solution for you.

In the map.js file, change this line:

var map = new Map(address, desctot, title, markerico, spanId);

to

window.map = new Map(address, desctot, title, markerico, spanId);

and then change your html file to link to map.js instead of map.min.js. If this solution works for you, you can always re-minify the code using a service like http://jscompress.com/.

Also, you need to modify the JS in your page:

// The tab 'shown' event seems to cause less flicker for me
$('a[href="#tab2"]').on('shown', function (e) {
    initialise();
});

function initialise() {
    var myMap = document.getElementById('map-myid1');
    google.maps.event.trigger(myMap, 'resize');
    map.map.setCenter(map.marker.getPosition()); // Add this line to recentre the map
};

Note: I’ve only tested this on Chrome so far, but it works for me.

5

Thanks. It works.

There is minor problem. When I make browser window small, like from 980px to 500px width, the marker/center of map not changeable…

Nevermind, it seems that default map without tab also not center after resize, I will talk to its author…

6

Add this code below your initialise function:

var resizeTimeout;
window.onresize = function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
        map.map.setCenter(map.marker.getPosition());
    }, 500);
}

Whenever the window is resized, it should recentre the map.