我想在同一页面上显示两张地图。但是map-canvas正在显示，而map-canvas-2没有显示

Question

我想显示两个map ion同一页面。问题是“map-canvas”正确显示但map-canvas-2根本没有显示。我现在该怎么办请帮助......

这是我的HTML代码......

            <div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
                <div id="map-canvas"></div>
            </div>
            <div class="google-map wow fadeInDown col-sm-6" data-wow-duration="500ms">
                <div id="map-canvas-2"></div>
            </div>  

这是我的JAVASCRIPT代码

    function initialize() {
        var myLatLng = new google.maps.LatLng(19.0285, 73.0586);
        var myLatLng2 = new google.maps.LatLng(23.344101, 85.309563);
        var mapOptions = {
            zoom: 14,
            center: myLatLng,
            disableDefaultUI: true,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: false,
            mapTypeControlOptions: {
                mapTypeIds: google.maps.MapTypeId.ROADMAP
            }
        };

        var mapOptions2 = {
            zoom: 14,
            center: myLatLng2,
            disableDefaultUI: true,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            draggable: false,
            mapTypeControlOptions: {
                mapTypeIds: google.maps.MapTypeId.ROADMAP
            }
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);


        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: 'img/location-icon.png',
            title: 'Kharghar',
        });

        var marker2 = new google.maps.Marker({
            position: myLatLng2,
            map: map2,
            icon: 'img/location-icon.png',
            title: 'Ranchi',
        });


        google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map, marker);


        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        var map2 = new google.maps.Map(document.getElementById('map-canvas-2'), mapOptions2);


        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: 'img/location-icon.png',
            title: 'Kharghar',
        });

        var marker2 = new google.maps.Marker({
            position: myLatLng2,
            map: map2,
            icon: 'img/location-icon.png',
            title: 'Ranchi',
        });


        google.maps.event.addListener(marker, 'click', function () {
           infowindow.open(map, marker);
        });

        google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map2, marker2);
        });

        var styledMapOptions = {
            name: 'US Road Atlas'
        };

        var usRoadMapType = new google.maps.StyledMapType(
        roadAtlasStyles, styledMapOptions);

        map.mapTypes.set('roadatlas', usRoadMapType);
        map.setMapTypeId('roadatlas');
        }

        google.maps.event.addDomListener(window, "load", initialize);


        });

        google.maps.event.addListener(marker, 'click', function () {
        infowindow.open(map2, marker2);
        });

        var styledMapOptions = {
            name: 'US Road Atlas'
        };

        var usRoadMapType = new google.maps.StyledMapType(
         roadAtlasStyles, styledMapOptions);

        map.mapTypes.set('roadatlas', usRoadMapType);
    map.setMapTypeId('roadatlas');
        }

        google.maps.event.addDomListener(window, "load", initialize);


        });

提前致谢： - ）