Google Maps - 2 maps on the same page not working

Question

I need to have two google maps on the same page.

However, for any reason, only the first map seems to be displayed.

I've tried this topic without any success, as the problem persists.

My code now looks like 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);

}

And the 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

IF the maps DIVs are initially invisible, you must apply height style directly on that DIVs.

If it's not the case, please provide console log of 2 map objects