谷歌地图隐藏div [英] Google maps in hidden div

问题描述

我有一个包含两个标签页的页面。第一个标签有照片，第二个是谷歌地图。问题是谷歌地图不完全绘制，因为它是在一个隐藏的div。所以我使用onclick（）将initialize（）函数移动到了map选项卡的href中。这是第一次点击它，但当您返回到照片选项卡，然后返回到地图选项卡时，地图只会部分绘制。如果再次单击地图选项卡，它可以完美地工作。任何想法？

标签javascript：

 < script type = 文本/ JavaScript的 > 
 
 $（function（）{
 var tabContainers = $（'div.tabs> div'）; 
 
 $（'div.tabs ul.tabNavigation a）。click（function（）{
 tabContainers.hide（）。filter（this.hash）.show（）; 
 $ b $（'div.tabs ul.tabNavigation a' ）.removeClass（'selected'）; 
 $（this）.addClass（'selected'）; 
 
 return false; 
}）。filter（'：first'） .click（）; 
}）; 
 
< / script> 
  

google maps javascript：

 < script type =text / javascript> 
函数initialize（）{
 var latlng = new google.maps.LatLng（<？= $ lat？>，<？= $ lng？>）; 
 var myOptions = {
 zoom：15，
 center：latlng，
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 var map = new google.maps.Map（document.getElementById（map_canvas），
 myOptions）; 
 
 var marker = new google.maps.Marker（{
 position：latlng，
 map：map，
 title：<？= $ fulladdress？>> ;
}）; 
} 
< / script> 
  

html：

 < div class =tabs> 
< ul class =tabNavigation> 
< li>< a href =＃first>照片< / a>< / li> 
< li>< a href =＃map_canvasonclick =initialize（）; return false;> Map< / a>< / li> 
< / ul> 
 
 
< div id =first> < / DIV> 
< div id =map_canvas>< / div> 
  

解决方案

在您需要调整大小之前， map：

  google.maps.event.trigger（map，'resize'）; 
 map.setZoom（map.getZoom（））; 
  

这是用于V3的：

< a href =http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448> http://code.google.com/p/gmaps-api-issues/issues / detail？id = 1448

更多信息：

https://groups.google.com/group/google-maps -js-api-v3 / browse_thread / thread / 251f20b769d116ea / ba3ca54f5e1352a2？pli = 1

I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div. So I moved the initialize() function to the href of the map tab using onclick(). This works the first time you click on it but when you return to the photos tab and then go back to the map tab the map only partially draws. If you click the map tab a second time it works perfectly. Any ideas?

tabs javascript:

<script type="text/javascript">

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

</script>

google maps javascript:

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);

   var marker = new google.maps.Marker({
      position: latlng, 
      map: map, 
      title:"<?=$fulladdress ?>"
  });   
}
</script>

html:

<div class="tabs">
        <ul class="tabNavigation">
            <li><a href="#first">Photos</a></li>
            <li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
        </ul>


        <div id="first"> </div>
      <div id="map_canvas" ></div>

解决方案

I've seen this before you need to resize the map:

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

This is for V3:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

A little more info:

https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1

这篇关于谷歌地图隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！