Javascript 谷歌地图可拖动标记在折叠类引导中不起作用

我想在一个折叠类引导中放置一个GoogleMaps可拖动标记，但它不起作用。如果我把地图放在collapse类之外，一切都正常，那么问题就发生在我把地图放在collapse类里面的时候

这是HTML代码：

<div class="col-lg-12" >
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Input Map?</a>
                </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                    <!--map start-->
                    <div class="col-lg-8" >
                        <div class="form-group">
                            <label>Map</label>
                            <div id="map" class="col-lg-8 tambah-map-canvas"></div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <label>Coordinat</label><br/>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Latitude</label>
                            <input type="text" name="lat" id="lat" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <label>Longitude</label>
                            <input type="text" name="lng" id="lng" class="form-control">
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="form-group">
                            <input type="button" id="reset" value="Reset Location">
                            <br/><br/>
                        </div>
                    </div>
                    <!--map end-->
                </div>
            </div>
        </div>
    </div>
</div>

这是JavaScript：

<script type="text/javascript">

    function updateMarkerPosition(latLng) {
        document.getElementById('lat').value = [latLng.lat()];
        document.getElementById('lng').value = [latLng.lng()];
    }

    var myOptions = {
      zoom: 7,
    scaleControl: true,
      center:  new google.maps.LatLng(-6.175500045712664,106.8272084918824),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"),
    myOptions);

    var marker1 = new google.maps.Marker({
    position : new google.maps.LatLng(-6.175500045712664,106.8272084918824),
    title : 'lokasi',
    map : map,
    draggable : true
    });

    //updateMarkerPosition(latLng);

    google.maps.event.addListener(marker1, 'drag', function() {
        updateMarkerPosition(marker1.getPosition());
    });
</script>

<script type="text/javascript">
    document.getElementById('reset').onclick= function() {
        var field1= document.getElementById('lng');
        var field2= document.getElementById('lat');
        field1.value= field1.defaultValue;
        field2.value= field2.defaultValue;
    };
</script>

有什么我错过的吗？我做错了什么？

---

谢谢。

我在地图的id上看不到你的CSS，但如果它没有设置为特定的高度，即400px，那么当你折叠div时，它真的不会显示

因此，最快的解决方案是将地图的高度设置为固定值

然后，无论是否有可拖动的标记，地图都将在折叠时加载

这是一个示例：如果需要，也可以是一个示例

var映射； 变量中心={ lat:-34.397， 液化天然气：150.644 }; 函数初始化映射{ map=new google.maps.Mapdocument.getElementById'map'{ 中心:中心,， 缩放：8 }; var marker=new google.maps.marker{ 位置：中， 地图：地图， 德拉格布尔：是的 }; } 地图{ 高度：400px；/*将此设置为固定值*/ } /*可选：使示例页面填充窗口*/ html， 身体{ 身高：100%； 保证金：0； 填充：0； } 简单地图

---

创建JSFIDLE以更好地进行分析。