Javascript 同一页面上的多个google地图在引导弹出模式下不工作

我在bootstrap模式的同一页面上有两个google地图，我正在使用google地图google.maps.event.addDomListener（窗口，'load'，initMap）要加载多个贴图，让我向您展示我的代码

HTML

  <li data-toggle="modal" data-target="#myModal"><a href="#">Contact</a></li>
  <h1 data-toggle="modal" data-target="#myModal2">Free Evaluation</h1>
<div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog modal-custom">

        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>

                <div id="map2" class="map2">

                </div>
            </div>

        </div>

    </div>
</div>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-custom">

        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>


                <div id="map" class="map2">

                </div>
            </div>

        </div>

    </div>
</div>

我基本上面临两个问题

1） map.setcenter（）不工作

2） 第一个贴图加载得很好，但第二个贴图显示灰色框

---

在我的场景中，我尝试了几种解决方案，但似乎都不起作用！有什么帮助吗？

如果触发map2而不是map，它会工作。同时将map.setCenter更改为map2.setCenter。setCenter无法工作的原因是您试图调用map和map2，但它们在您使用的范围内不可用

var映射
函数initMap（）{
var mylatng={
拉脱维亚：43.6222102，
液化天然气：-79.6694881
};
map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
});
}
var-map2；
函数initMap2（）{
var mylatng={
拉脱维亚：43.6222102，
液化天然气：-79.6694881
};
map2=新的google.maps.Map（document.getElementById（'map2'）{
缩放：15，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图:map2,，
});
}
google.maps.event.addDomListener（窗口'load'，initMap）；
google.maps.event.addDomListener（窗口'load'，initMap2）；
$（'#myModal'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map，“resize”）；
map.setCenter（新的google.maps.LatLng（42.3605336，-72.6362989））；
});
$（'#myModal2'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map2，“resize”）；
地图2.setCenter（新的google.maps.LatLng（42.3605336，-72.6362989））；
});
.map2{
z指数：1！重要；
宽度：100%；
高度：350px；
}
#地图{
宽度：100%；
高度：350px；
z指数：-1；
}

JS-Bin

免费评估
&时代；
&时代；
如果您触发map2而不是map，它会工作。同时将map.setCenter更改为map2.setCenter。setCenter无法工作的原因是您试图调用map和map2，但它们在您使用的范围内不可用


var映射
函数initMap（）{
var mylatng={
拉脱维亚：43.6222102，
液化天然气：-79.6694881
};
map=new google.maps.map（document.getElementById（'map'）{
缩放：15，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图：地图，
});
}
var-map2；
函数initMap2（）{
var mylatng={
拉脱维亚：43.6222102，
液化天然气：-79.6694881
};
map2=新的google.maps.Map（document.getElementById（'map2'）{
缩放：15，
中心：myLatLng
});
var marker=new google.maps.marker({
职位：myLatLng，
地图:map2,，
});
}
google.maps.event.addDomListener（窗口'load'，initMap）；
google.maps.event.addDomListener（窗口'load'，initMap2）；
$（'#myModal'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map，“resize”）；
map.setCenter（新的google.maps.LatLng（42.3605336，-72.6362989））；
});
$（'#myModal2'）.on（'show.bs.modal'，function（）{
google.maps.event.trigger（map2，“resize”）；
地图2.setCenter（新的google.maps.LatLng（42.3605336，-72.6362989））；
});
.map2{
z指数：1！重要；
宽度：100%；
高度：350px；
}
#地图{
宽度：100%；
高度：350px；
z指数：-1；
}

JS-Bin

免费评估
&时代；
&时代；
这是我的心意。您应该声明全局变量2映射

var map1, map2;
function initMap() {
    var myLatLng = {
        lat: 43.6222102,
        lng: -79.6694881
    };

    map1 = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: myLatLng
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map1,
    });
}


function initMap2() {
    var myLatLng = {
        lat: 43.6222102,
        lng: -79.6694881
    };

    map2 = new google.maps.Map(document.getElementById('map2'), {
        zoom: 15,
        center: myLatLng
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map2,
    });
}
google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'load', initMap2);
$('#myModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map1, "resize");
    map1.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
});

$('#myModal2').on('shown.bs.modal', function () {
    google.maps.event.trigger(map2, "resize");
    map2.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
});

这是我的anwser。您应该声明全局变量2映射

var map1, map2;
function initMap() {
    var myLatLng = {
        lat: 43.6222102,
        lng: -79.6694881
    };

    map1 = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: myLatLng
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map1,
    });
}


function initMap2() {
    var myLatLng = {
        lat: 43.6222102,
        lng: -79.6694881
    };

    map2 = new google.maps.Map(document.getElementById('map2'), {
        zoom: 15,
        center: myLatLng
    });

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map2,
    });
}
google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'load', initMap2);
$('#myModal').on('shown.bs.modal', function () {
    google.maps.event.trigger(map1, "resize");
    map1.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
});

$('#myModal2').on('shown.bs.modal', function () {
    google.maps.event.trigger(map2, "resize");
    map2.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
});

伟大的解决了灰盒问题！但是设置中心仍然不工作设置中心在第一张地图和第二张地图上工作吗？这是错误！map.setCenter不是函数map.setCenter是函数。问题是map和map2在各自的功能之外不可用。看看我的编辑。我让它工作了。它似乎在为我定心。你甚至可以改变纵横，新的中心就出现了。太棒了！解决了灰盒问题！但是设置中心仍然不工作设置中心在第一张地图和第二张地图上工作吗？这是错误！map.setCenter不是函数map.setCenter是函数。问题是map和map2在各自的功能之外不可用。看看我的编辑。我让它工作了。它似乎在为我定心。你甚至可以改变经纬度和经纬度，新的中心就会出现。现在错误消失了！但它仍然不是centering@uneebmeer，这是我的密码。拖动地图，然后关闭并重新打开？它仍然不工作？我没有做任何事情，我只是打开它，默认情况下它不在中心。您确定您想要在中心的位置不是
42.3605336，-72.6362989
。我打开谷歌地图，输入准确的位置