Google map not filling modal popup

Question

I'm using a modal popup when users click the map on this page here , which brings up a larger map with directions.

The map isn't filling the entire space however and I can't figure out why. When I right click on it to check in an the chrome inspector, it makes the map fill the modal.

Excuse all the code, but I thought it best to include it all:

       <div class="map clearfix">
            <div class="bg left-contact">
            <% if len(""&rsAdvert("ContactPostcode"))>0 then %>
                      <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.

Answer 1

For completeness: if you're using Bootstrap modal window you need to use shown.bs.modal event in place of shown event.

Here the code:

  $("#modalWindowId").on("shown.bs.modal", function(e) {
    google.maps.event.trigger(map, "resize");
    map.setCenter(markerLatLng); // Set here center map coordinates
  });

Take a look here for learn more: http://coderpills.wordpress.com/2014/06/02/showing-google-map-inside-a-bootstrap-modal-window/

Answer 2

You can trigger a resize event on the map, after the modal is launched, which will cause it to resize to fit the dimensions of the containing div . From the documentation :

Developers should trigger this event on the map when the div changes size

// Add this at the bottom of the script which defines your map
// It will trigger the resize event on the map after the modal has launched
$('#myModal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

I think when you launch dev tools the window.onResize event is causing the resize event to be triggered on the map. You can prove this by detaching dev tools from the browser window before clicking your modal.

Answer 3

Try to use this

padding: 0;

Css:

.modal-body {
max-height: 400px;
overflow-y: auto;
padding: 0;
position: relative;
     }

Answer 4

Thanks for the answers guys. Just to help anyone else that may have this problem, in addition to having to resize due to having the map in a modal, I also had to reset the center.

The below code needed to be added within the initialize function.

    $('#show_map').on('shown', function () {
        google.maps.event.trigger(map, "resize");
        map.setCenter(myLatlng);
    });

Answer 5

$('#Map_Modal_ID').on('shown.bs.modal', function () {
    initialize();
});