title: Google maps don't render properly when visibility initially set to hidden
body: <p>I have inserted google maps in a animated website, which must make use of the display: hidden property and sliding effects using jquery, but the map does not display properly. You will find that the map is off-center. Please help!!!</p>
  
  <p>
  
  <p><strong>EDIT: The code below has been edited so that it now displays correctly (thanks to Salman) but now it's no longer shows at the centre of the marker. the map.setCenter(myLatlng) did not not work either.</strong> </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  &lt;script&gt;
      var map //NEW!
      var myLatlng = new google.maps.LatLng(52.518903284520796,-1.450427753967233);
      function initialize() {
          var mapOptions = {
              zoom: 13,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //NEW!(SMALL EDIT)
  
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Beauty Courses 4 U',
              icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png'
          });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;style&gt;
  #menu {display: none;}
  .sliderContainer {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  }
  .sliderViewer {
  position: absolute;
  left: 0px;
  overflow-x: hidden;
  width: 900px;
  height: 300px;
  }
  .sliderViewer&gt;div {
  width: 300px;
  height: 300px;
  float: left;
  overflow: hidden;
  }
  #map_canvas {
  width: 200px;
  height: 200px;
  margin: 0 auto 0 auto;
  }
  .sliderViewer&gt;div:nth-child(1) {background: red;}
  .sliderViewer&gt;div:nth-child(2) {background: yellow;}
  .sliderViewer&gt;div:nth-child(3) {background: blue;}
  a {cursor: pointer;}
  &lt;/style&gt;
  &lt;body&gt;
  &lt;a id="showMenu"&gt;Show menu (click here)&lt;/a&gt;
  &lt;div id="menu"&gt;
  &lt;ul&gt;
  &lt;li id="link1"&gt;&lt;a&gt;link1&lt;/a&gt;&lt;/li&gt;
  &lt;li id="link2"&gt;&lt;a&gt;link2 (click on this link)&lt;/a&gt;&lt;/li&gt;
  &lt;li id="link3"&gt;&lt;a&gt;link3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="sliderContainer"&gt;
  &lt;div class="sliderViewer"&gt;
        &lt;div&gt;some conetent in panel 1&lt;/div&gt;
        &lt;div&gt;The map is off center:
        &lt;div id="map_canvas"&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div&gt;some conetent in panel 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  $( document ).ready(function(){
      $('#showMenu').on('click', function(){
          $('#menu').show(500);
      })
      $('#link1').on('click',function(){
          $('.sliderViewer').animate({left: 0}, 1000);
          })
      $('#link2').on('click',function(){
          $('.sliderViewer').animate({left: -300}, 1000);
                      google.maps.event.trigger(map, 'resize'); //NEW!
                      map.setCenter(myLatlng); //NEW!
      })
      $('#link3').on('click',function(){
          $('.sliderViewer').animate({left: -600}, 1000);
      })
   });
   &lt;/script&gt;
   &lt;/html&gt;
  </code></pre>