Google maps 隐藏div中的Google map V.3不'；不要全部加载

我知道，这个问题已经被问了很多次，我尝试了所有可能的解决方案，包括：

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

，但没有一个适合我

所以，我需要加载一个隐藏的地图页面，并且只在用户点击“ShowMap”链接时显示地图。问题是地图没有显示完整尺寸。它看起来是181x186像素大小，但其余的只是一个灰色的正方形

This is my script: 

<script type="text/javascript"> 
function toggle() {
var ele = document.getElementById("map_canvas");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show map";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide map";
}
} 
</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady"></script>
<script type="text/javascript">
function handleApiReady() {
var myLatlng = new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>);
var myOptions = {
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(<?php echo $latitude;?>, <?php echo $longitude;?>),
draggable: true,
icon: 'http://google-maps-icons.googlecode.com/files/factory.png', 
map: map
});

google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();
});
}
</script>

<div id="map_canvas" style="display:none;width:760px;height:420px;"></div>

这是我的脚本：
函数切换（）{
var ele=document.getElementById（“映射画布”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“显示地图”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏地图”；
}
} 
函数handleapirady（）{
var mylatng=newgoogle.maps.LatLng（，）；
变量myOptions={
缩放：9，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（，），
真的，
图标：'http://google-maps-icons.googlecode.com/files/factory.png', 
地图：地图
});
google.maps.event.addListener（标记'dragend'，函数（事件）{
document.getElementById（“纬度”）.value=this.getPosition（）.lat（）；
document.getElementById（“经度”）.value=this.getPosition（）.lng（）；
});
}

这对我很有用：

<script type="text/javascript"> 
function toggle() {
  var ele = document.getElementById("map_canvas");
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "Show map";
  }
  else {
    ele.style.display = "block";
    text.innerHTML = "Hide map";
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  }
} 
</script>

函数切换（）{
var ele=document.getElementById（“映射画布”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“显示地图”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏地图”；
google.maps.event.trigger（map，“resize”）；
地图设置中心（myLatlng）；
}
} 

如果我将myLatlng和map设置为全局

这对我来说很有用：

<script type="text/javascript"> 
function toggle() {
  var ele = document.getElementById("map_canvas");
  var text = document.getElementById("displayText");
  if(ele.style.display == "block") {
    ele.style.display = "none";
    text.innerHTML = "Show map";
  }
  else {
    ele.style.display = "block";
    text.innerHTML = "Hide map";
    google.maps.event.trigger(map, "resize");
    map.setCenter(myLatlng);
  }
} 
</script>

函数切换（）{
var ele=document.getElementById（“映射画布”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“显示地图”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏地图”；
google.maps.event.trigger（map，“resize”）；
地图设置中心（myLatlng）；
}
} 

如果我将myLatlng和map设置为全局

---

若要对此进行汇总，请仅在div可见时而非隐藏时绘制地图，以避免复杂化。您可以在完全渲染地图的DOM后触发地图“调整大小”事件。若要汇总此汇总，请仅在div可见时而非隐藏时绘制地图，以避免复杂化。您可以触发地图“调整大小”完全渲染贴图的DOM后的事件。