How to use google.maps.event.trigger(map, 'resize')

There were actually a couple of problems with your source code.

• The initialize() function is created, but never called
• The $(document).ready should be called after jQuery us loaded
• The map should be a global variable (like @Cristiano Fontes said) and not a var map
• (Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
• You're using the wrong ID (#myModal1 is never located in the HTML).

And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).

Hope it helped!

Just add it here

<script type="text/javascript">
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  google.maps.event.trigger(map, 'resize');
       });
          });
 </script>

BUT you need to put the map as a global variable, so lose the var here

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

 </script>

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
                    google.maps.event.trigger(map, 'resize');
                });
});