How to show Google map on the modal bootstrap?

Show one google map one page one in bootstrap modal

• I am having trouble getting two maps to work, one being in a bootstrap modal. I have tried other fixes such as resizing the map once the modal is loaded but I'm having no success. I just need the modal one to work correctly, I don't mind altering any of the existing code. function initialize(mapNum) { var map; var myLatlng = new google.maps.LatLng(50.676,-70.786); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map"+mapNum), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Hello" }); } initialize(1); initialize(2); $('#mapModal').on('shown.bs.modal', function(){ map.setCenter(new google.maps.LatLng(54, -2)); google.maps.event.trigger(map, 'resize'); }); .map { height: 50vh; width: 100%; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-8"> <div id="map1" class="map"></div> </div> <div class="col-md-4"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mapModal"><h4>Dialog Box Pop-Up Map</h4> </button> </div> </div> </div> <div id="mapModal" class="modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title text">Map</h4> </div> <div class="modal-body"> <div id="map2" class="map"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-fresh" data-dismiss="modal">Close</button> </div> </div> </div> </div>

• Answer:

  Found the Answer! I missed something in the console earlier which was: map not defined Which meant the solution was to take the map variable from within the initialize function and move it outside of it. Old function initialize(mapNum) { var map; var myLatlng = new google.maps.LatLng(50.676,-70.786); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } } New var map; function initialize(mapNum) { var myLatlng = new google.maps.LatLng(50.676,-70.786); var myOptions = { zoom: 14, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } }