multiple google maps on same page not working in bootstrap popup modal

Question

i have two google maps on same page in bootstrap modal i am using google maps google.maps.event.addDomListener(window, 'load', initMap); to load multiple maps, let me show you my code

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

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

2) the first map loads just fine, but the second map shows grey boxes.

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. Also change map.setCenter to 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.

 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.

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

multiple google maps on same page not working in bootstrap popup modal

Question

2 answers

solution1
1 2017-06-22 14:30:24

solution2
1 ACCPTED 2017-06-22 14:49:15

multiple google maps on same page not working in bootstrap popup modal

Question

2 answers

solution1 1 2017-06-22 14:30:24

solution2 1 ACCPTED 2017-06-22 14:49:15

solution1
1 2017-06-22 14:30:24

solution2
1 ACCPTED 2017-06-22 14:49:15