Javascript 我想在同一页上显示两张地图。但map canvas正在显示，map-canvas-2未显示

我想在同一页上显示两张地图。问题是“地图画布”显示正确，但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>  

---

提前感谢：-）

您似乎有重复的代码。。请删除不可用的部分您需要在id上进行整个调用，而不是将调用映射作为不同的选项。所以，在他们自己的通话和他们自己的选项中呼叫#mapone#maptwo，您就可以排序了。这里的例子：我支持@scaisEdge comment。您应该通过创建一个显示映射的函数来重构代码。这样对你和我们都会更容易。

    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);


        });