Карта не занимает весь div

Question

Я использую геокодирование для отображения карты Google с отображением местоположения пользователей.Я смотрю на карту со скользящим меню.У меня проблема, когда вы открываете скользящее меню, карта занимает лишь небольшую область в верхнем левом углу, но как только вы изменяете размер окна браузера, карта занимает всю область, как я этого хочу.Это происходит независимо от того, каким образом вы изменяете размер окна браузера, даже делая его меньше.Дайте мне знать, если вам нужно увидеть больше моего кода, чем это:

Функция скользящего меню

$(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);
       });
     });
  });

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

Контейнеру карты требуются ширина и высота для правильного отображения карты, но кажется, что анимация мешает значениям.

Карта работает, когда размер браузера изменен, так как ширина и высота установлены правильно исобытие resize возникает.

Самое быстрое решение вашей проблемы - вызов метода resize, когда анимация завершится следующим образом:

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

Обновление JSFiddle: http://jsfiddle.net/uADHv/2/