侧面板内的Google Map-灰色方块 [英] Google Map inside siding panel - grey squares
问题描述
感谢您抽出时间来检查我的问题.
是的-我看到了一个Google Maps实现，我正在尝试在客户端站点上进行复制，但是遇到了困难.
这是我要重新创建的效果- http://www.franckmaurin.com/.当您单击获取联系"时，页面顶部会展开一个Google Map，将内容向下推.
这就是我的尝试方式-
<body>
<div id="map-container">
<div id="map_canvas"></div>
</div>
<p id="open-map">Open The Map</a>
.. rest of content
</body>
然后是我的CSS
#map_canvas {
height:350px;
width:100%;
}
#map-container {
height:0px;
}
..然后是JS
$('.open-map').click(function() {
$('#map-container').css("height",350);
});
..显然这是精简版.我也想为下拉菜单设置动画.但是我一直在获取不完整的地图，看起来像这样 http://d.pr/rNnr .不完整，有很多灰色.我尝试了不同的打开和关闭方法(包括在容器上设置{height:350px; display:none}，但始终存在此问题.如果我不隐藏地图容器，则地图不会有问题.
有人知道我在这里可能做错了什么吗?
您应设置#map-container css样式，
#map-container {
float:left;
height:350px;
width:960px;//or other width you need
display:none;
}
然后使用jquery来控制#map-container slideUp和slideDown
thanks for taking the time to check my question.
Here it is -- I saw a Google Maps implementation that I am trying to replicate on a client site, but I am having difficulties.
Here is the effect I am trying to recreate - http://www.franckmaurin.com/. When you click "Get in Touch" a Google Map expands from the top of the page, pushing the content down.
So here is how I am trying it --
<body>
<div id="map-container">
<div id="map_canvas"></div>
</div>
<p id="open-map">Open The Map</a>
.. rest of content
</body>
And then my CSS
#map_canvas {
height:350px;
width:100%;
}
#map-container {
height:0px;
}
..and then the JS
$('.open-map').click(function() {
$('#map-container').css("height",350);
});
..this is a stripped down version obviously. I want to animate the dropdown too.. but I keep getting an incomplete map that looks like this http://d.pr/rNnr. Incomplete with lots of grey. I have tried different approaches to opening and closing (including setting {height:350px; display:none} on the container but this problem is always there. If I don't hide the map container there is no problem with the map.
Does anyone have any ideas what I could be doing wrong here?
you should set #map-container css style,
#map-container {
float:left;
height:350px;
width:960px;//or other width you need
display:none;
}
then use jquery to control #map-container slideUp and slideDown
这篇关于侧面板内的Google Map-灰色方块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
