3

Possible Duplicate:
Google Map API inside a Reveal Modal not showing fully

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.

How do I get the whole map to display?

A link to my page: http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

CLICK ON THE GOOGLE MAP BUTTON TO SEE THE ISSUE AT HAND

The Reveal Modal script:

<script type="text/javascript">
$(document).ready(function() {
$('#myModal1').click(function() {
$('#myModal').reveal();
});
});
</script>

The Div which contains the Google Map API

<div id="map_canvas" style="width:600px; height:300px;"></div>
<a class="close-reveal-modal">&#215;</a>
 </div>

The button which when clicked, reveals the Google Map

<div class="five columns">
  <ul class="button-group even three-up" id="contact-button-group">
    <li><a href="#" class="button" data-reveal-id="myModal">Google Map</a></li>
    <li><a href="#" class="button">Button 2</a></li>
    <li><a href="#" class="button">Button 3</a></li>
  </ul>
</div>
Community
  • 1
  • 1
Jeremy Flaugher
  • 417
  • 2
  • 8
  • 15
  • 1
    have you noticed, that if you keep the modal open and switch to another tab in the browser and switch back, that the full map is loaded? – pfried Oct 24 '12 at 19:59
  • Wow, thanks for bringing that to my attention. That is weird..I am wondering if it is because I have the map displayed in a hidden container. – Jeremy Flaugher Oct 24 '12 at 20:03
  • inspecting element makes the whole map load also..hmmm – Jeremy Flaugher Oct 24 '12 at 20:08
  • 1
    theres a kind of reload triggered that causes google to check the size of the container again, try to find a kind of refresh method like `google.maps.event.trigger(map, 'resize')` – pfried Oct 24 '12 at 20:18
  • 1
    you already asked this very same question here: http://stackoverflow.com/questions/13060779/google-map-api-inside-a-reveal-modal-not-showing-fully – RASG Oct 25 '12 at 13:24
  • Yes, he did. See my answer posted there. – puckhead Oct 25 '12 at 14:32

1 Answers1

5

After the modal is shown use google.maps.event.trigger(map, 'resize') where "map" is the instance of your map.

pfried
  • 5,000
  • 2
  • 38
  • 71
  • I have tried to get this working, and know that it is the answer, but I am very new at the whole js thing, and admit to the js I currently have is just copy and paste. Where and how to do I put the event trigger to resize? Do I put it in the google map api code that I already have? Thank you for your time and help in this. I am taking js next semester, and have very little understanding of syntax and how to put it all together. – Jeremy Flaugher Oct 24 '12 at 21:38
  • I have been messing around with it and still haven't gotten it to work properly. Grrrrr – Jeremy Flaugher Oct 25 '12 at 01:57
  • I see you got this working on your site, can you offer any help at http://stackoverflow.com/questions/16321577/google-maps-api-v3-foundation-4-reveal-modal-not-displaying-properly ? – cassidymack May 01 '13 at 18:10