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 an

Answer 1

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 2

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

Answer 3

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 4

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 5

Try to use this

padding: 0;

Css:

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