title: Google Map API in Foundation reveal modal not displaying properly
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/13060779/google-map-api-inside-a-reveal-modal-not-showing-fully">Google Map API inside a Reveal Modal not showing fully</a>  </p>
  </blockquote>
  
  
  
  <p>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.  </p>
  
  <p>How do I get the whole map to display?</p>
  
  <p>A link to my page:
  <a href="http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#" rel="nofollow noreferrer">http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#</a></p>
  
  <p>CLICK ON THE GOOGLE MAP BUTTON TO SEE THE ISSUE AT HAND</p>
  
  <p>The Reveal Modal script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function() {
  $('#myModal1').click(function() {
  $('#myModal').reveal();
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>The Div which contains the Google Map API</p>
  
  <pre><code>&lt;div id="map_canvas" style="width:600px; height:300px;"&gt;&lt;/div&gt;
  &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>The button which when clicked, reveals the Google Map</p>
  
  <pre><code>&lt;div class="five columns"&gt;
    &lt;ul class="button-group even three-up" id="contact-button-group"&gt;
      &lt;li&gt;&lt;a href="#" class="button" data-reveal-id="myModal"&gt;Google Map&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="button"&gt;Button 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="button"&gt;Button 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>