Google maps not resizing

Question

I am trying to load google maps on a reveal window (foundation 4) and I think I am doing something wrong since I got this result

The reveal window's code is below

    <a href="#" class="foundation-open">Click Me For A Modal</a>

    <div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <style>
      #map_canvas {
        width: 100%;
    height: 400px;
  }
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>
  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas"></div>
<a class="close-reveal-modal">&#215;</a>
</div>

and this is the script I am using to call the reveal

jQuery(document).ready(function($){
$('a.foundation-open').click(function(e){
    e.preventDefault();
    $('#myModal').foundation('reveal', 'open');
    google.maps.event.trigger(map, "resize");
    });
});

Answer 1

This partial rendering happens when the element is hidden during the initialize process. The resize won't be sufficient to overcome it (in my experience).

Check out the discussion here.