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');                });});