Javascript 谷歌地图不显示在HTML上<；部门>；？_Javascript_Jquery_Html_Css_Google Maps

Javascript 谷歌地图不显示在HTML上<；部门>；？

javascript jquery html css google-maps

Javascript 谷歌地图不显示在HTML上<；部门>；？,javascript,jquery,html,css,google-maps,Javascript,Jquery,Html,Css,Google Maps,我正在尝试开发一个有两个容器的网页。mainmapdiv覆盖整个页面，而mainhomediv位于mainmapdiv的顶部。我的目标是隐藏mainhomediv，并在单击图像（id=mapbutton）时在mainmapdiv上显示Google地图。代码如下： <script type="text/javascript"> var map; function initialize() { var mapOptions = { center: new google.m

我正在尝试开发一个有两个容器的网页。mainmapdiv覆盖整个页面，而mainhomediv位于mainmapdiv的顶部。我的目标是隐藏mainhomediv，并在单击图像（id=mapbutton）时在mainmapdiv上显示Google地图。代码如下：

<script type="text/javascript">
var map;
function initialize() {
    var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,    
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mainmapdiv"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<script>
var map;
$(document).ready(function(){

//Click on button to display map
$('#mapbutton').click(function(){
    $('#mainhomediv').fadeTo("slow",0);
    $('#mainhomediv').css({opacity: 0});
    initialize();
});

//Click on Home to get back home div
$('#home').click(function(){
    $('#mainhomediv').fadeTo("slow",1);
    $('#mainhomediv').css({opacity: 1});
});
});


var映射；
函数初始化（）{
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“mainmapdiv”）、mapOptions）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var映射；
$（文档）.ready（函数（）{
//点击按钮显示地图
$（“#映射按钮”）。单击（函数（）{
$（'mainhomediv'）.fadeTo（“slow”，0）；
$（'#mainhomediv'）.css（{opacity:0}）；
初始化（）；
});
//点击主页返回主页div
$（'#home'）。单击（函数（）{
$（'mainhomediv'）.fadeTo（“slow”，1）；
$（'#mainhomediv'）.css（{opacity:1}）；
});
});

HTML代码

<body>
<!--This is the primary container-->
<div id='#mainmapdiv' class='mainmapdiv'>
    <div id='#mainhomediv' class='mainhomediv'>
    .
    //Somewhere in here there is an image with id='mapbutton'
    .
    .
    </div>
</div>
</body>


.
//这里的某个地方有一个id='mapbutton'的图像
.
.

现在，当我单击图像时，mainhomediv会完全隐藏，但地图不会显示在mainmapdiv上

我已导入以下脚本：

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/apijs?sensor=false"></script>

您需要设置

#mainhomediv的高度和宽度

例如：

不知道这是否能解决问题，但您必须纠正它：

您的JS链接错误：

你的部门ID中有#：

<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>

您有多个

var映射在脚本中。mainhomediv是否有高度？上次map对我不起作用时，包含的div没有高度，我想你指的是#mainmapdiv，因为它是容纳map的容器。是的，我已经为它设置了100%的高度和宽度！id中的#解决了它！我为什么要用身份证？只有上帝知道！这就是当我们专注于更困难的事情时发生的事情。我们记住jQuery使用#id，所以我们将#id放在所有地方！很高兴能解决你的问题^_^
<div id='#mainmapdiv' class='mainmapdiv'>
<div id='#mainhomediv' class='mainhomediv'>