SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Google map not center after resize in Bootstrap Tab

    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.

    Pls read post #23 for more info.

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

    Ref:
    http://blog.codebusters.pl/en/entry/...-in-hidden-div
    http://code.google.com/p/gmaps-api-i...detail?id=1448
    http://kalpeshlets.wordpress.com/201...ze-and-center/
    http://stackoverflow.com/questions/8...-changed-width
    http://stackoverflow.com/questions/7...-in-hidden-div
    http://stackoverflow.com/questions/4...pdated-picture

    I need to add setcenter to resize code below:
    Code:
        $(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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    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?
    PMed u.

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi,

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

    In the map.js file, change this line:
    Code JavaScript:
    var map = new Map(address, desctot, title, markerico, spanId);
    to
    Code JavaScript:
    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:
    Code JavaScript:
    // 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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by fretburner View Post
    Hi,

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

    In the map.js file, change this line:
    Code JavaScript:
    var map = new Map(address, desctot, title, markerico, spanId);
    to
    Code JavaScript:
    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:
    Code JavaScript:
    // 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.
    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. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,411
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by alouty View Post
    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...
    Add this code below your initialise function:
    Code JavaScript:
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •