SitePoint Sponsor

User Tag List

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

    Lightbulb Google map with bootstrap tab's problem

    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. #2
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    After reading various SO threads (like this one and this one) and 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:

    Code:
    <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. #3
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,441
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    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:
    HTML Code:
    <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

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imouto View Post
    After reading various SO threads (like this one and this one) and 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:

    Code:
    <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>


    Thanks. It worked.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imouto View Post
    After reading various SO threads (like this one and this one) and 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:

    Code:
    <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>


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


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
  •