Question

我正在尝试在单页中加载三张地图。这个div正在崩溃。以下是我的HTML：

<div class="panel panel-default">
                    <div id="bangkokloc" class="panel-heading" role="tab" id="headingOne">
                        <div class="locat-block">
                            <div class="flex-box">
                                <div class="loc-data">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        <div class="flex-box">
                                            <div class="date-sec">
                                                <p class="day">05</p>
                                                <p class="time">nov. 2017</p>
                                            </div>
                                            <div class="detail-sec">
                                                <h3 class="loc-title">Bangkok, Thailand</h3>
                                                <p class="loc-sub">Centara Grand & Bangkok Convention Centre</p>
                                                <p class="loc-detail">999/99 Rama 1 Road, Pathumwan   Bangkok 10330, Thailand<br>13:00 registration; 14:00 - 17:00 seminar</p>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="loc-act">
                                    <a href="#booknow" class="com-btn">Get your Ticket!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <div class="map-wrap">
                                <div id="map1"></div>


                            </div>
                        </div>
                    </div>
                </div>

另一个类似的崩溃与div <div id="map"></div>

保持一致

以下是我的剧本：

<script src="https://maps.googleapis.com/maps/api/js?key=*MyKey*&callback=initMap" async defer></script>
<script>

    function initMap() {
        var uluru = {lat: 3.154301, lng: 101.712720,  title: 'Kuala Lumpur Convention Centre'};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            scrollwheel: false,
            center: uluru
        });
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });

        var uluru1 = {lat: 13.7503107, lng: 100.5367808,  title: 'Centara Grand & Bangkok Convention at CentralWorld'};
        var map1 = new google.maps.Map(document.getElementById('map1'), {
            zoom: 16,
            scrollwheel: false,
            center: uluru1
        });
        var marker = new google.maps.Marker({
            position: uluru1,
            map: map1
        });

    }
</script>

这仅在第一个div中显示地图，而在其他两个div中不显示。我参考了here。

我尝试调整地图大小：

$(".collapse").on('show.bs.collapse', function () {
 google.maps.event.trigger(map, "resize");
 google.maps.event.trigger(map1, "resize");
 google.maps.event.trigger(map2, "resize");
})

但没有效果。

同一页面上有多个Google地图

0 个答案: