Google地图 - 同一页面上的2张地图无效

Question

我需要在同一页面上有两张谷歌地图。

但是，出于任何原因，似乎只显示第一张地图。

我已经尝试过这个话题没有任何成功，因为问题仍然存在。

我的代码现在看起来像这样

function initialize() {
            var myLatlng = new google.maps.LatLng(41.560655,-8.386545);
            var myLatlng2 = new google.maps.LatLng(41.560655,-8.386545);
            var mapOptions = {
                zoom: 5,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var mapOptions2 = {
                zoom: 8,
                center: myLatlng2,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            var map2 = new google.maps.Map(document.getElementById('room-canvas'), mapOptions2);

}

和HTML

             <div class="g_12">
                <div class="widget_header">
                    <h4 class="widget_header_title wwIcon i_16_valid">Distribuição Utilizadores</h4>
                </div>
                <div class="widget_contents noPadding" style="height:450px;">
                    <div id="map-canvas"></div>


                </div>
            </div>

            <div class="g_12">
                <div class="widget_header">
                    <h4 class="widget_header_title wwIcon i_16_valid">Distribuição Salas</h4>
                </div>
                <div class="widget_contents noPadding" style="height:450px;">
                    <div id="room-canvas"></div>


                </div>
            </div>

Answer 1

如果地图DIV最初是不可见的，则必须直接在该DIV上应用高度样式。

如果不是这样，请提供2个地图对象的控制台日志