Google Map API in Foundation reveal modal not displaying properly [duplicate]

Question

Possible Duplicate:
Google Map API inside a Reveal Modal not showing fully

I have a Google Map API located within a Reveal Modal. For those that do not know what that is, it is basically a hidden container that pops up when a button is clicked. I have within this reveal modal the Google Map API, which is displaying, but not displaying all of the map, it is only showing maybe a third of it.

How do I get the whole map to display?

A link to my page: http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

CLICK ON THE GOOGLE MAP BUTTON TO SEE THE ISSUE AT HAND

The Reveal Modal script:

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

The Div which contains the Google Map API

<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">&#215;</a>
 </div>

The button which when clicked, reveals the Google Map

<div class="five columns">
  <ul class="button-group even three-up" id="contact-button-group">
    <li><a href="#" class="button" data-reveal-id="myModal">Google Map</a></li>
    <li><a href="#" class="button">Button 2</a></li>
    <li><a href="#" class="button">Button 3</a></li>
  </ul>
</div>

Answer 1

After the modal is shown use google.maps.event.trigger(map, 'resize') where "map" is the instance of your map.