Google Maps API V3 Gray Areas

Question

I installed the Google Maps API V3, but I'm having trouble getting the resize function to work properly. I've put the script to display the map in a division that drops down when a link is clicked, however, it shows gray areas on the sides. I've read instances where you have to have the resize function in the script that displays the division, from what I can understand, but I'm having trouble implementing it properly.

Here's the code that causes the division (class="content") to be revealed:

    $(function() {
$('.action').click(function() {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    content.slideToggle('fast');
});

I have the map inside of a div with the id "map".

  <div class="map">
      <div id="map_canvas""></div>
  </div>

I've been up all night working on other portions of the site and am fairly scatterbrained at the moment. sorry if I forgot to post something necessary to resolve this.

Thanks in advance, Bc.

Answer 1

You need to manually throw the even resize on the google map.

google.maps.event.trigger(map, 'resize')

Reference.

Update

<script type="text/javascript"> 
// Global Variable
var map;

// This is a global Function
function initialize() 
{ 
  // This variable is scoped only for the initialize function,
  // it is not available to other functions scoped globally
  var myOptions = 
  { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
  };

  // Instead of a function scoped map variable this should be global
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  google.maps.event.trigger(map, 'resize') 
} 
</script>

Then you can change to the following code:

$(function() 
{
  $('.action').click(function() 
  {          
    var name = $(this).attr("name");
    var content = $('.content[name=' + name + ']');
    $('.content').not(content).hide('fast');
    // this uses the callback functionality
    // to only throw the trigger after the
    // animation finishes.
    content.slideToggle('fast',
      function() 
      {
        google.maps.event.trigger(map, 'resize');
      });
  });
});