Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Map API inside a Reveal Modal not showing fully
    primarykey
    data
    text
    <p>I am having problems with a Google Map that I have inside a div, which upon button click, pops up on screen. The Google Map is only partially showing. I know that I need to that I need to create a resize event, but do not know how, or where to put it. Any help would be much appreciated! Please keep in mind that I have little knowledge of JS!</p> <p>Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:</p> <p><a href="http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#" rel="nofollow">http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#</a></p> <p>My Google API script:</p> <pre><code>&lt;script type="text/javascript"&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("map_canvas"), mapOptions); } &lt;/script&gt; </code></pre> <p>The div which contains the map:</p> <pre><code>&lt;div id="myModal" class="reveal-modal large"&gt; &lt;h2&gt;How to get here&lt;/h2&gt; &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 script which calls the map upon button click:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $('#myModal1').click(function() { $('#myModal').reveal(); }); }); &lt;/script&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