Google Map API inside a Reveal Modal not showing fully

Question

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!

Link to test site: CLICK ON GOOGLE MAP BUTTON TO SEE THE PROBLEM AT HAND:

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

My Google API script:

<script type="text/javascript">
    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);
    }  
</script> 

The div which contains the map:

<div id="myModal" class="reveal-modal large">
    <h2>How to get here</h2>
    <div id="map_canvas" style="width:600px; height:300px;"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

The script which calls the map upon button click:

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

Answer 1

Following Two solutions worked for me

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);
  return map;
}

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


$(document).ready(function() {
  var myMap;
  $('#myModal').bind('open', function() {
    if(!myMap) {
      var myMap = initialize();
      setTimeout(function() {
        google.maps.event.trigger(myMap, 'resize');
      }, 300);                  
    }
  });
}

OR

$(document).ready(function() {
  var myMap;
  $('#myModal').bind('opened', function() {
    if(!myMap) {
      var myMap = initialize();
      google.maps.event.addDomListener(window, 'load', initialize);
    }
  });
});

Answer 2

First, based on the source linked to, the script which calls the map upon button click is doing nothing but throwing an error because you have it in the page before jQuery is loaded. You can see it in the error console. You need to move that to the bottom of the page after the rest of the scripts.

Your reveal is "working" because you are using the data-reveal-id attribute on the menu item and the reveal script wires it up automatically.

You are creating the map onload which is bad practice. Don't create it until/unless it is needed.

So to fix your issue, this is what I did. Remove the data-reveal-id from the menu item and replace it with an ID, or you can just use some other selector to access it. I changed it to id="myModal1" since that is what you had in your event code already.

Move your script which calls the map upon button click to the bottom, and change it to look like this:

$(document).ready(function() {
var map;
$('#myModal1').click(function() {
    if(!map){
        var mapOptions = {
          center: new google.maps.LatLng(39.739318, -89.266507),
          zoom: 5,
          mapTypeId: google.maps.MapTypeId.ROADMAP

        };
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);          
    }

    $('#myModal').reveal();
});

});

This will create the map only when the user clicks the link to show it and only creates it once. That should fix it for you. If you have to, you can pass an opened callback to the reveal() call and trigger resize there but in my limited testing it was not necessary.

You can also get rid of the entire initialize function.

Now go get a band-aid and put some ice on that head.

Answer 3

Removing width: 600px; on the <div id="map_canvas"> and triggering resize on your map after opening the modal should do the trick:

$(".reveal-modal").on("reveal:opened", function(e) {
  google.maps.event.trigger(map, 'resize')
});

Answer 4

Try this

<script type="text/javascript">
    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);
    }
    $( document ).bind( "pageshow", function( event, data ){
        google.maps.event.trigger(map, 'resize');               
    }); 
</script>  

Answer 5

$("#myModal").on('shown.bs.modal', function(){
     google.maps.event.trigger(map, 'resize')
});