Javascript 当我展开手风琴面板时，谷歌地图数据不会出现

当我在我的网页上展开我的导航面板时，谷歌地图没有显示任何内容，只是显示为灰色。只有当我打开控制台时，地图才会出现。我需要对我的代码进行哪些更改，才能使地图显示其标记和我已编程的位置。当你把地图放在面板外面的时候，它工作的非常好。如果有人能对我写的代码进行扩展，那就太好了

HTML代码：

    <button class="accordion">Navigation</button>
        <div class="panel">
            <div id="map" style="width:60%;height:300px"></div>

            </div>

CSS Code:
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;
        }

导航
CSS代码：
手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
显示：无；
背景色：白色；
}
div.panel.show{
显示：块；
}

脚本代码：

<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: 15};
            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>

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

您的手风琴表演处理程序只需触发地图调整大小：

google.maps.event.trigger(map, "resize");

第一个脚本块的代码变为：

<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");
            google.maps.event.trigger(map, "resize");  //added
        }
    }
</script>

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

工作小提琴：

---

（见第14行）

考虑从代码的URL中删除api密钥。非常感谢。还有什么原因可以解释为什么当我加载地图时，它会显示远离实际标记的地图，而不是在其顶部？