发表新帖
发表新帖

Google Maps Not Working in jQuery Tabs

前端 未结
关注
13 1716
滥情空心
滥情空心 2020-12-09 22:56

Google maps not working when placed inside jQuery tabs is a question that\'s all over the web. In my research so far none of the solutions seem to work. Hopefully someone he

相关标签:
13条回答
  • 半阙折子戏
    2020-12-09 23:02

    I solved this for the bootstrap Tab. It is just the matter of calling resize map function right after the map container is displayed.

    I have added the following out side the initialize() function:

    jQuery('.nav-tabs a[href="#my-map"]').on('shown.bs.tab', function(){
         google.maps.event.trigger(map, 'resize');
         map.setZoom(15); //You need to reset zoom
         map.setCenter(myLatlng); //You need to reset the center
    });
    0 讨论(0)
  • 逝去的感伤
    2020-12-09 23:02

    Its work for me, meet my requirement, and you may use it as reference:

    <script type="text/javascript">

function setCookie (name, value, expires, path, domain, secure) {
    document.cookie = name + "=" + escape(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}

function getCookie (name) {
    var cookie = " " + document.cookie;
    var search = " " + name + "=";
    var setStr = null;
    var offset = 0;
    var end = 0;
    if (cookie.length > 0) {
        offset = cookie.indexOf(search);
        if (offset != -1) {
            offset += search.length;
            end = cookie.indexOf(";", offset);
            if (end == -1) {
                end = cookie.length;
            }
            setStr = unescape(cookie.substring(offset, end));
        }
    }
    if (setStr == 'false') {
        setStr = false;
    } 
    if (setStr == 'true') {
        setStr = true;
    }
    if (setStr == 'null') {
        setStr = null;
    }
    return(setStr);
}

function hidePopup() {
    setCookie('popup_state', false); 
    document.getElementById('popup').style.display = 'none';
    document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}

function showPopup() {
    setCookie('popup_state', null);
    document.getElementById('popup').style.display = 'block';
    document.getElementById('hideup').style.display = 'none';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );   
}

function checkPopup() {
    if (getCookie('popup_state') == null) { // if popup was not closed
        document.getElementById('popup').style.display = 'block';
        document.getElementById('hiding').style.display = 'block';

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

  }   
}

</script>


<body onload="checkPopup();">

    <div class="map-button" id="hiding"><a href="#" onclick="showPopup(); return false;"><img src="images/map_magnify.png" alt="" title="Show Google Map" ></a></div>

    <div class="map-button" id="popup" style="display:none"> <a href="#" onclick="hidePopup(); return false;"><img src="images/map_delete.png" alt="" title="Hide Google Map" ></a>
    <div id="gmap"></div>
    </div>
</body>

    Note : You can make CSS class 'map-button' for positioning the button as required. Put your own image buttom. Replace id="gmap" as yours. Hope it helps you.

    0 讨论(0)
  • 生来不讨喜
    2020-12-09 23:05

    This might not work for everyone! One solution that worked for me was to have the hidden tabs display but somewhere "not visible" to the user. This will allow the map to render even though is not in first/active tab. Find a way to target the hidden tabs ONLY:

    .tab-hidden{
    position: absolute !important;
    left: -10000px !important; /* maybe not that much */
    display:block !important;
    width:100% !important; /* I found this to be very important*/
}

    Map width 100% and not a fixed width.

    0 讨论(0)
  • 长情又很酷
    2020-12-09 23:09

    rogercut's answer got me where I needed to be. I am using Bootstrap tabs, nested, and could not get the map to update.

    When I click on tab group 2 (#tg2), the map tab is the first one showing. I also needed to fire the resize if someone clicked the second level tab (#tab1) from within tab group 2.

    The click handler works, but the problem is that on click, the tab is still hidden... By setting a small delay, it gives time for the tab to show before the resize fires off.

    // Create Map
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(48.8582, 2.2945), //I see Paris, I see France
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);
}

//Bind click handlers - Here's the important part
$('a[href=#tab1], a[href=#tg2]').on('click', function() {
    setTimeout(function(){
        google.maps.event.trigger(map, 'resize');
    }, 50);
});

    So, we're telling the browser to wait 50ms after the click to do the resize. In my testing, 50ms was plenty of time for the tab to show, yet short enough that it's not really noticeable to the user. In fact, my testing worked with a delay of only 1ms on the 4-5 machines I tested it on - even a dog slow laptop we had sitting in storage. 50ms is just being safe.

    Hope this helps someone else.

    0 讨论(0)
  • 忘掉有多难
    2020-12-09 23:09

    The problem is simple. Maps must render in an element that has dimensions. If you use a tab system that hides the tab content, all elements inside the tab content have no dimensions while parent is hidden. If jQuery tools css lets you do it, set the "hidden" content offscreen instead of hidden.

    In order to use: google.maps.event.trigger(map, 'resize');

    You need access to the intitial map object variable which is "var wpgmappitymap1" but is scoped inside the map init function. If you make it a global variable you can then put it in your resize trigger

      google.maps.event.trigger(wpgmappitymap1, 'resize');
    0 讨论(0)
  • 再見小時候
    2020-12-09 23:11

    When developing a website which included a map tab content I ran into the same issue. The site is http://samet.com.ar (in spanish, click on the map icon or the 'ubicacion' link). The same error you mention arose whenever the tab div loaded together with the other ones in its tab group. I've found out that if I could manage to give it some time to load after the other tabs did, then there wouldn't be any problem.

    I could afford to do that because anyway I gave some 3.5 sec for the wrapper to show up in order to get all the background photos loaded and the map is in an invisible tab at load time, so I don't need it to show up right away.

    The map tab then loads as a callback function right after the whole wrapper does. If you inspect the page, look for id 'pane-container'. Inside 'panes' you'll find the map div loaded at the end.

    The relevant jQuery code I'm using in the index.php page is as follows:

    <script type='text/javascript'>
   ( function( $ ) {
     // for SOF post --- previous code deleted ---
     $( "#wrapper" ).delay( 3500 ).fadeIn( "slow",function() {
     // Animation complete
     <?php $post_map = get_posts('name=map');?>
     $( "#map" ).delay( 1000 ).append( <?php echo "'".$post_map[0]->post_content."'"; ?> );
            } );
 } )( jQuery );
</script>

    I hope this helps somehow. Forgot to mention that the map code is embedded as a content in a specific post. (BTW, the map marker is located on the upper right on purpose to show the main access roads.)

    Cheers!

    0 讨论(0)
 看不清?
提交回复
热议问题