Question

    <a class="showmap" href="#">Show map</a>
<div id="map" style="height: 400px; width: 400px;"> </div>
<script type="text/javascript">
$(function() { 
 //initialise map
});

$(document).ready(function(){
    $('.showmap').click(function(){
    $("#map").slideToggle();
    google.maps.event.trigger(map, 'resize');
   });
});
</script>

我相信你现在可以告诉我。我试图在谷歌地图上打开和关闭。问题是单击showMap按钮后的地图在此站点上显示如下：

http://forum.jquery.com/viewImage.do?fileId=14737000003424984&forumGroupId=14737000000003003

有人能指出我做错了什么吗？我希望地图显示在整个div上。如果您查看该图片的底部，您会注意到地图copywrite和品牌stff in在正确的位置但地图不是。它不会移动到div的底部。它只是跳回到图片中的位置。

Answer 1

看起来你过早地调用你的调整大小。尝试这样做：

$("#map").slideToggle('slow', function() {
    google.maps.event.trigger(map, 'resize');
});

这将使幻灯片切换完成后调用resize函数。

如果上述方法不起作用，解决方法是将地图div包含在另一个隐藏溢出的div中，然后滑动切换父div而不是map div

GoMap - 显示隐藏的div后调整大小

1 个答案: