javascript - Google map not filling modal popup -

i'm using modal popup when users click map on page here, brings larger map directions.

the map isn't filling entire space , can't figure out why. when right click on check in chrome inspector, makes map fill modal.

excuse code, thought best include all:

       <div class="map clearfix">             <div class="bg left-contact">             <% if len(""&rsadvert("contactpostcode"))>0 %>                       <a href="#mymodal" role="button" data-toggle="modal"> <div class="small-map" style="width:100%;height:130px;background:url(http://maps.google.com/maps/api/staticmap?center=<%=server.urlencode(""&rsadvert("contactpostcode"))%>&zoom=14&size=250x250&maptype=roadmap&markers=color:orange|label:a|<%=server.urlencode(""&rsadvert("contactpostcode"))%>&sensor=false) center no-repeat;"></div></a>                       <div class="expand"></div>     <!-- modal -->     <div id="mymodal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>         <h3 id="mymodallabel">modal header</h3>       </div>       <div class="modal-body">         <p><div id='map-canvas'></div></p>       </div>       <div class="modal-footer">         <button class="btn" data-dismiss="modal" aria-hidden="true">close</button>         <button class="btn btn-primary">save changes</button>       </div>     </div>         <script src="http://code.jquery.com/jquery.js"></script>         <script src="/js/bootstrap/js/bootstrap.min.js"></script>                <% end if %>              </div>         </div>       <script src="http://maps.googleapis.com/maps/api/js?q=london&key=aizasybapedyfbbnwjtvt8w3ubom34y7g6vk69a&sensor=false"></script>     <script>         var map;         function initialize() {           var mapoptions = {             zoom: 15,             center: new google.maps.latlng(-34.397, 150.644),             maptypeid: google.maps.maptypeid.roadmap           };           var geolocate = function(address, callback) {                 $.ajax({                         url: "http://maps.googleapis.com/maps/api/geocode/json",                         data: {                             "sensor": true,                             "address": address                         },                         datatype: "json",                         success: function(d) {                             if (d.status == "zero_results") callback(false);                             if (d.results && d.results[0] && d.results[0].geometry) {                                 callback({                                     "ne": d.results[0].geometry.bounds.northeast,                                     "sw": d.results[0].geometry.bounds.southwest,                                     "center": d.results[0].geometry.location                                 });                             }                             else callback(false);                         }                     });           };           map = new google.maps.map(document.getelementbyid('map-canvas'),               mapoptions);           geolocate("<%=server.urlencode(""&rs("ca_postcode"))%>", function(c) {                 map.setcenter(new google.maps.latlng(c.center.lat, c.center.lng));          });         }         google.maps.event.adddomlistener(window, 'load', initialize);     </script> 

thanks.

you can trigger resize event on map, after modal launched, cause resize fit dimensions of containing div. documentation:

developers should trigger event on map when div changes size

// add @ bottom of script defines map // trigger resize event on map after modal has launched $('#mymodal').on('shown', function () {   google.maps.event.trigger(map, 'resize'); }) 

i think when launch dev tools window.onresize event causing resize event triggered on map. can prove detaching dev tools browser window before clicking modal.