Google Map API внутри модального сообщения не отображается полностью

У меня проблемы с картой Google, которая у меня есть внутри div, который при нажатии кнопки появляется на экране. Карта Google отображается только частично. Я знаю, что мне нужно, чтобы создать событие изменения размера, но не знаю, как и где его разместить. Любая помощь приветствуется! Пожалуйста, имейте в виду, что у меня мало знаний о JS!

Ссылка на тестовый сайт: НАЖМИТЕ НА КНОПКУ GOOGLE MAP, ЧТОБЫ ВИДЕТЬ ПРОБЛЕМУ НА РУКУ:

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

Мой скрипт Google API:


    function initialize() {
        var mapOptions = {
            center: new google.maps.LatLng(39.739318, -89.266507),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    }  
 

Div, который содержит карту:


    How to get here
    
    <a class="close-reveal-modal">×</a>

Скрипт, который вызывает карту при нажатии кнопки:


    $(document).ready(function() {
        $('#myModal1').click(function() {
            $('#myModal').reveal();
        });
    });

Ответы на вопрос(5)

Ваш ответ на вопрос