SitePoint Sponsor

User Tag List

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