谷歌地图 - 同一页面上的 2 个地图不起作用答案

【问题标题】：Google Maps - 2 maps on the same page not working谷歌地图 - 同一页面上的 2 个地图不起作用
【发布时间】：2013-05-14 11:18:51
【问题描述】：

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

但是，出于某种原因，似乎只显示了第一张地图。

我尝试了this 主题但没有任何成功，因为问题仍然存在。

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

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>

【问题讨论】：

标签： javascript html google-maps

【解决方案1】：

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

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

【讨论】：

救命小贴士！谢谢！