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

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.