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

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

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

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

<script type="text/javascript">
    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);
    }  
</script> 

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

<div id="myModal" class="reveal-modal large">
    <h2>How to get here</h2>
    <div id="map_canvas" style="width:600px; height:300px;"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

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

<script type="text/javascript">
    $(document).ready(function() {
        $('#myModal1').click(function() {
            $('#myModal').reveal();
        });
    });
</script>