Question

我在bootstrap模式中的同一页面上有两张谷歌地图我正在使用谷歌地图 google.maps.event.addDomListener（窗口，＆＃39;加载＆＃39;，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

如果你触发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>

Answer 2

这是我的回答。你应该声明全局变量2 map。

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

同一页面上的多个谷歌地图无法在bootstrap弹出模式中工作

2 个答案: