title: How to show Google Maps Directions in tabs or div that has display:none
body: <p>When I'm loading a Google Map (v3) with Directions into a div that is hidden from the user, the resulting map is not zoomed and centered correctly. I tried firing a <code>resize</code> event but that did only partially solve the problem.</p>
  
  <p>Usually when loading a map with directions, the API automatically finds the optimal view (ie. zoom level and center) as to show the entire journey. Any ideas what I'm doing wrong?</p>
  
  <p>Please see <a href="http://jsfiddle.net/mB6AZ/1/" rel="nofollow">JsFiddle</a></p>
  
  <pre><code>&lt;button id="show"&gt;Show&lt;/button&gt;
  &lt;div id="a"&gt;
     &lt;div id="map_wrapper" style="display:none"&gt;
        &lt;div id="map_canvas" style="height: 354px; width:713px;"&gt;&lt;/div&gt;
     &lt;/div&gt;
    &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;callback=initialize"&gt;&lt;/script&gt;
    &lt;script&gt;
    var directionsService,
        directionsDisplay,
        map;
  
      function initialize() {
  
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer(); 
        var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
  
        var start = 'New York, NY';
        var end = 'Chicago, IL';
        var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
          }
        });
      }
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the javascript:</p>
  
  <pre><code>$(document).ready(function(e) {
      $('#show').on('click', function() {
          $('#map_wrapper').show();
          google.maps.event.trigger(map, "resize");
      });
  });
  </code></pre>