Javascript 为什么我的地图不显示在“手风琴”选项卡中？_Javascript_Jquery_Html_Google Maps

Javascript 为什么我的地图不显示在“手风琴”选项卡中？

javascript jquery html google-maps

Javascript 为什么我的地图不显示在“手风琴”选项卡中？,javascript,jquery,html,google-maps,Javascript,Jquery,Html,Google Maps,我已将导航放置在我的手风琴按钮/选项卡中，因为我希望用户只需单击选项卡，就可以随时查看导航。地图和所有与地图相关的代码都是完全功能性的，因为我在控制台上测试地图时没有收到任何错误，但由于某些原因，它仍然没有显示。我还使用了API密钥。只有当我用控制台测试它时，它才会工作。为什么我单击选项卡时它不显示地图这是我的地图代码 <!doctype html> <html> <head> <meta http-equiv="content-type

我已将导航放置在我的手风琴按钮/选项卡中，因为我希望用户只需单击选项卡，就可以随时查看导航。地图和所有与地图相关的代码都是完全功能性的，因为我在控制台上测试地图时没有收到任何错误，但由于某些原因，它仍然没有显示。我还使用了API密钥。只有当我用控制台测试它时，它才会工作。为什么我单击选项卡时它不显示地图

这是我的地图代码

   <!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta charset = "utf-8">
    <title>London Tour Guide</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

    <script src="jquery.js"></script>

    <style>
        div.container { position: absolute; top: 10px; left: 400px; width: 720px; height: 1300px;
            background-color: white; }

        div.content {
            width: 700px; height: 1200px;
            background-color: lightblue; padding: 5px; }

        h1.welcome {font-family: Verdana, sans-serif; color: orangered;
            text-align: center; text-shadow: 2px 2px Grey;
            transition: 4s;}

        h1.stpauls{font-family: Verdana, sans-serif; color: orangered;
            text-align: center;
        }

        h1.welcome:hover{transform: rotateX(360deg); color:yellow; }

        p.medium {
    font-size: 12pt;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #333;
        }

        p.small {
    font-size: 12pt;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #333;
        }

        img {
            display: block;
            margin: auto;
        }



        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover, .dropdown:hover .dropbtn {
            background-color: red;
        }

        li.dropdown {
            display: inline-block;

        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;

        }

        .dropdown-content a:hover {background-color: #f1f1f1}

        .dropdown:hover .dropdown-content {
            display: block;
        }


        .dropbtn1 {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }


        .dropbtn1:hover, .dropbtn1:focus {
            background-color: #3e8e41;
        }


        .dropdown1 {
            position: relative;
            display: inline-block;
        }


        .dropdown1-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }


        .dropdown1-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }


        .dropdown1-content a:hover {background-color: #f1f1f1}

        .show{display:block;}

        button.accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        button.accordion.active, button.accordion:hover {
            background-color: #ddd;
        }

        div.panel {
            padding: 0 18px;
            display: none;
            background-color: white;
        }

        div.panel.show {
            display: block;
        }




    </style>
</head>
<body>

<div class="container">
<div class = "content">

    <div class = "header">
        <img src = "headerlondon.jpg" alt = "header"></div>

    <ul>
        <li><a class="active" href="Project.html">Home</a></li>
        <li><a href="Map.html">Maps </a></li>
        <li class="dropdown">
            <a href="#" class="travel">Travel <i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
                <a href="Bus.html">Bus</a>
                <a href="Taxi.html">Taxi</a>
                <a href="Tube.html">Tube</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" class="sightseeing">SightSeeing <i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
                <a href="LondonEye.html">London Eye</a>
                <a href="TowerofLondon.html">Tower of London</a>
                <a href="BigBen.html">Big Ben</a>
                <a href="StPaulsCathedral.html">St Pauls Cathedral</a>
                <a href="BuckinghamPalace.html">Buckingham Palace</a>
                <a href="WestMinister.html">WestMinister</a>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" class="Museums">Museums <i class="fa fa-caret-down"></i></a>
            <div class="dropdown-content">
                <a href="BritishMuseum.html">British Museum</a>
                <a href="ScienceMuseum.html">Science Museum</a>
                <a href="NationalHistoryMuseum.html">National History Museumm</a>

            </div>

        </li>
    </ul>

    <button class="accordion">Navigation</button>
    <div class="panel" style = "position: relative">
    <div id="map" style="width:50%;height:250px"></div>
        </div>



</div>

    <script>
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
            acc[i].onclick = function(){
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
    </script>

<script>
    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter = new google.maps.LatLng(51.508742,-0.120850);
        var mapOptions = {center: myCenter, zoom: 10};
        var map = new google.maps.Map(mapCanvas,mapOptions);
        var marker = new google.maps.Marker({
            position: myCenter,
            icon: "poi.png"
        });
        marker.setMap(map);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script>




</div>
</body>
</html>


伦敦导游
div.container{位置：绝对；顶部：10px；左侧：400px；宽度：720px；高度：1300px；
背景色：白色；}
部门内容{
宽度：700px；高度：1200px；
背景色：浅蓝色；填充：5px；}
欢迎{字体系列：Verdana，无衬线；颜色：橙色；
文本对齐：居中；文本阴影：2px 2px灰色；
转换：4s；}
h1.stpauls{字体系列：Verdana，无衬线；颜色：橙色；
文本对齐：居中；
}
h1.欢迎：悬停{transform:rotateX（360度）；颜色：黄色；}
p、 中等{
字号：12号；
字体系列：“Palatino Linotype”，“Book Antika”，Palatino，衬线；
颜色：#333；
}
p、 小的{
字号：12号；
字体系列：“Palatino Linotype”，“Book Antika”，Palatino，衬线；
颜色：#333；
}
img{
显示：块；
保证金：自动；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
}
李{
浮动：左；
}
李安，.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
li a:悬停，.下拉：悬停.dropbtn{
背景色：红色；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉内容a:悬停{背景色：#f1f1}
.下拉：悬停.下拉内容{
显示：块；
}
.dropbtn1{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn1:悬停，.dropbtn1:焦点{
背景色：#3e8e41；
}
.下拉列表1{
位置：相对位置；
显示：内联块；
}
.下拉列表1内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.dropdown1内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.dropdown1内容a:悬停{背景色：#f1f1}
.show{display:block；}
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
显示：无；
背景色：白色；
}
div.panel.show{
显示：块；
}










航行
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

通常，地图要求其容器的位置为：相对位置

可以尝试添加位置：相对于panel类吗

如果这不起作用，请确保您的google maps应用程序密钥已从YOURKEY设置为任意密钥

<script src="https://maps.googleapis.com/maps/api/js?key=**YOURKEY**&callback=myMap"></script>

地图要求容器具有特定大小，并且在装载时可见。它需要知道它应该适合什么大小

不要显示或显示灰色区域？它只是用标记图标显示灰色区域