同一页面上的多个Google Maps在引导弹出模式下不起作用

Question

i have two google maps on same page in bootstrap modal i am using google maps google.maps.event.addDomListener(window, 'load', initMap); 我在引导模式下的同一页面上有两个谷歌地图，我正在使用谷歌地图google.maps.event.addDomListener（window，'load'，initMap）; to load multiple maps, let me show you my code 加载多张地图，让我向您展示我的代码

HTML 的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>

Java Script Java脚本

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

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

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


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

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

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

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

i am basically facing two issues! 我基本上面临两个问题！

1) map.setCentre() is not working 1）map.setCentre（）无法正常工作

2) the first map loads just fine, but the second map shows grey boxes. 2）第一张地图加载正常，但第二张地图显示灰色框。

JSBIN 吉宾

DEMO 演示

i have tried a couple of solutions in my scenario but none seems to be working! 我在我的场景中尝试了几种解决方案，但似乎都没有用！ any help? 有什么帮助吗？

Answer 1

If you trigger map2 instead of map, it works. 如果您触发map2而不是map，它将起作用。 Also change map.setCenter to map2.setCenter. 还将map.setCenter更改为map2.setCenter。 The reason setCenter isn't working is because you're trying to call map and map2 which are not available in the scope you're using. setCenter不起作用的原因是，您试图调用map和map2，它们在您使用的范围内不可用。

 var map function initMap() { var myLatLng = { lat: 43.6222102, lng: -79.6694881 }; map = new google.maps.Map(document.getElementById('map'), { zoom: 15, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, }); } var map2; 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(map, "resize"); map.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)); });

 .map2{ z-index: 1!important; width: 100%; height: 350px; } #map { width: 100%; height: 350px; z-index: -1; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGjZxt2eYCLL56VjIFKh1PewUOWd0oGcI"></script> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <title>JS Bin</title> </head> <body> <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> </body> </html>

Answer 2

This's my anwser. 这是我的烦恼。 you should declare global variable 2 map. 您应该声明全局变量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));
});

同一页面上的多个Google Maps在引导弹出模式下不起作用

问题描述

2 个解决方案

解决方案1
1 2017-06-22 14:30:24

解决方案2
1 已采纳 2017-06-22 14:49:15

同一页面上的多个Google Maps在引导弹出模式下不起作用

问题描述

2 个解决方案

解决方案1 1 2017-06-22 14:30:24

解决方案2 1 已采纳 2017-06-22 14:49:15

解决方案1
1 2017-06-22 14:30:24

解决方案2
1 已采纳 2017-06-22 14:49:15