Estou tendo problemas com um mapa do Google que tenho dentro de um div, que após o clique do botão, aparece na tela. O Google Map está apenas parcialmente exibido. Eu sei que preciso que eu precise criar um evento de redimensionamento, mas não sei como, ou onde colocá-lo. Qualquer ajuda seria muito apreciada! Por favor, tenha em mente que eu tenho pouco conhecimento de JS!

Link para o site de teste: CLIQUE NO BOTÃO MAPA DO GOOGLE PARA VER O PROBLEMA NA MÃO:

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

Meu script da API do Google:

<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> 

O div que contém o mapa:

<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>

O script que chama o mapa ao clicar no botão:

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