title: How to use google.maps.event.trigger(map, 'resize')
body: <p>I am new to JS, and have found the answer to a previous question, which brought up a new question, which brought me here again.</p>
  <p>I have a Reveal Modal that contains a Google Map API.  When a button is clicked, the Reveal Modal pops up, and displays the Google Map.  My problem is that only a third of the map is displaying.  This is because a resize trigger needs to be implemented.  My question is how do I implement the google.maps.event.trigger(map, 'resize')?  Where do I place this little snippet of code?</p>
  <p>Here is my test site.  Click on the Google Map button to see the problem at hand.
  <a href="http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#" rel="noreferrer">http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#</a></p>
  <p>The Reveal Model script:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    $(document).ready(function() {
    $('#myModal1').click(function() {
    $('#myModal').reveal();
         });
            });
   &lt;/script&gt;
  </code></pre>
  <p>My Google Map Script:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
   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(&quot;map_canvas&quot;),
   mapOptions);
   }
  
   &lt;/script&gt;
  </code></pre>
  <p>The div which holds the Google Map:</p>
  <pre><code>  &lt;div id=&quot;myModal&quot; class=&quot;reveal-modal large&quot;&gt;
    &lt;h2&gt;How to get here&lt;/h2&gt;
    &lt;div id=&quot;map_canvas&quot; style=&quot;width:600px; height:300px;&quot;&gt;&lt;/div&gt;
    &lt;a class=&quot;close-reveal-modal&quot;&gt;&amp;#215;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  <p><strong>UPDATE 2018-05-22</strong></p>
  <p>With a new renderer release in version 3.32 of Maps JavaScript API the resize event is no longer a part of <code>Map</code> class.</p>
  <p>The documentation states</p>
  <blockquote>
  <p>When the map is resized, the map center is fixed</p>
  <ul>
  <li><p>The full-screen control now preserves center.</p>
  </li>
  <li><p><strong>There is no longer any need to trigger the resize event manually.</strong></p>
  </li>
  </ul>
  </blockquote>
  <p>source: <a href="https://developers.google.com/maps/documentation/javascript/new-renderer" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/new-renderer</a></p>
  <p><code>google.maps.event.trigger(map, &quot;resize&quot;);</code> doesn't have any effect starting from version 3.32</p>