SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    43
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,267
    Mentioned
    33 Post(s)
    Tagged
    5 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
    43
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,267
    Mentioned
    33 Post(s)
    Tagged
    5 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
    43
    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
    SitePoint Mentor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,267
    Mentioned
    33 Post(s)
    Tagged
    5 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
  •