当可见性最初设置为隐藏时，Google 地图无法正确呈现答案

【问题标题】：Google maps don't render properly when visibility initially set to hidden当可见性最初设置为隐藏时，Google 地图无法正确呈现
【发布时间】：2013-10-15 06:20:08
【问题描述】：

我在一个动画网站中插入了谷歌地图，该网站必须使用显示：使用jquery的隐藏属性和滑动效果，但地图无法正常显示。您会发现地图偏离中心。请帮忙！！！

编辑：下面的代码已经过编辑，现在可以正确显示（感谢 Salman），但现在它不再显示在标记的中心。 map.setCenter(myLatlng) 也不起作用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
    var map //NEW!
    var myLatlng = new google.maps.LatLng(52.518903284520796,-1.450427753967233);
    function initialize() {
        var mapOptions = {
            zoom: 13,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //NEW!(SMALL EDIT)

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Beauty Courses 4 U',
            icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png'
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style>
#menu {display: none;}
.sliderContainer {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}
.sliderViewer {
position: absolute;
left: 0px;
overflow-x: hidden;
width: 900px;
height: 300px;
}
.sliderViewer>div {
width: 300px;
height: 300px;
float: left;
overflow: hidden;
}
#map_canvas {
width: 200px;
height: 200px;
margin: 0 auto 0 auto;
}
.sliderViewer>div:nth-child(1) {background: red;}
.sliderViewer>div:nth-child(2) {background: yellow;}
.sliderViewer>div:nth-child(3) {background: blue;}
a {cursor: pointer;}
</style>
<body>
<a id="showMenu">Show menu (click here)</a>
<div id="menu">
<ul>
<li id="link1"><a>link1</a></li>
<li id="link2"><a>link2 (click on this link)</a></li>
<li id="link3"><a>link3</a></li>
</ul>
<div class="sliderContainer">
<div class="sliderViewer">
      <div>some conetent in panel 1</div>
      <div>The map is off center:
      <div id="map_canvas"></div></div>
      <div>some conetent in panel 3</div>
</div>
</div>
</div>
</body>
<script>
$( document ).ready(function(){
    $('#showMenu').on('click', function(){
        $('#menu').show(500);
    })
    $('#link1').on('click',function(){
        $('.sliderViewer').animate({left: 0}, 1000);
        })
    $('#link2').on('click',function(){
        $('.sliderViewer').animate({left: -300}, 1000);
                    google.maps.event.trigger(map, 'resize'); //NEW!
                    map.setCenter(myLatlng); //NEW!
    })
    $('#link3').on('click',function(){
        $('.sliderViewer').animate({left: -600}, 1000);
    })
 });
 </script>
 </html>

【问题讨论】：

标签： jquery google-maps animation google-maps-api-3

【解决方案1】：

实际显示地图时需要触发地图调整大小事件。

$('#link2').on('click',function(){
    $('.sliderViewer').animate({left: -300}, 1000);
    google.maps.event.trigger(map, 'resize')
})

但是，除非您将 map 变量设为全局变量，否则这将不起作用。所以你可以这样开始：

var map;
function initialize() {
    // init codes
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

【讨论】：

这太棒了，因为地图现在可以正确显示，但现在地图没有以我放置的指针为中心（如“myLatLang”变量所示）
如果你在调整大小后调用map.setCenter 应该这样做。
谢谢，但这仍然不起作用。我已经编辑了原始帖子以考虑您的更改。
您没有将任何参数传递给 setCenter。您需要传递一个 LatLng 对象。
我已将 myLatlng 变量设为全局变量并将代码更改为：myMap.setCenter(myLatlng);但是这仍然不起作用。我做错了什么？？？？

【解决方案2】：

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;output=embed">
</iframe>
<br/>
<small>
<a href="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;source=embed" style="color:#0000FF;text-align:left">
View Larger Map</a>
</small>

你可以在html代码中使用这个地图............

【讨论】：

我不想使用它，因为您无法自定义指针。我可能会将此作为最后的手段。谢谢！

【解决方案3】：

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            google.maps.event.trigger(map, 'resize');

    });
});

【讨论】：