同一页面上的多个谷歌地图在引导弹出模式中不起作用

Question

我在引导模式的同一页面上有两个谷歌地图我正在使用谷歌地图 google.maps.event.addDomListener(window, '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>

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

我基本上面临两个问题！

1) map.setCentre() 不工作

2) 第一张地图加载正常，但第二张地图显示灰色框。

JSBIN

DEMO

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

Answer 1

这是我的答案。你应该声明全局变量 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));
});

Answer 2

如果你触发 map2 而不是 map，它会起作用。还将 map.setCenter 更改为 map2.setCenter。 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>