Question

I’m using geocoding to display a google map with the users location displayed. I’m looking the map to be situated with a sliding menu. The problem I have is when you open out the sliding menu the map only takes up a small area in the top left corner, but as soon as you resize the browser window the map takes up the full area like I want it to. This happens no matter what way you resize the browser window even by making it smaller. Let me know if you need to see more of my code than this:

Sliding menu function

$(document).ready(function()
  {
    $(".content").hide(); //updated line, removing the #panel ID.
    $('#tab').toggle(function() //adding a toggle function to the #tab
      {
        $('#panel').stop().animate(
        {
          width:"800px", opacity:0.8 //to adjust width of bar
        }
        , 500, function() //sliding the #panel to 200px
        {
          $('.content').fadeIn('slow'); //slides the content into view.
        });
       },
     function() //when the #tab is next cliked
     {
       $('.content').fadeOut('slow', function() //fade out the content
       {
         $('#panel').stop().animate(
           {
             width:"0", opacity:0.1 //slide the #panel back to a width of 0
           }
           , 500);
       });
     });
  });

Sliding menu html

<div id="panel">
  <div class="content">
    <div id="mapContainer"></div>
  </div>
</div>

CSS

#tab {
  width: 30px;
  height: 100px;
  position: fixed;
  left: 0px;
  top: 100px;
  display: block;
  cursor: pointer;
  background-color: #ff0000;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#panel {
  position: fixed;
  left: 0px;
  top: 50px;
  background-color: #ffffff;
  height: 500px;
  width: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

#mapContainer {
    height: 500px;
    width: 800px;
    border:10px solid #eaeaea;
}

Answer 1

The map container requires a width and height to correctly display the map but it seems the animations are interfering with the values.

The map works when the browser is resized as the width and height are correctly set and the resize event is raised.

The quickest solution to your problem would be to call the resize method when the animation has finished as so:

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

JSFiddle Update: http://jsfiddle.net/uADHv/2/