Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Map API in Foundation reveal modal not displaying properly
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload