title: Issue with google.maps.event.trigger(map, "resize")
body: <p>Thanks for checking it out.. I have an issue with this .js were i am using jquery to resize the map-canvas div. But once it has been resized i need the actual google map to reset its boundaries which i am using google.maps.event.trigger(map, "resize"), here is my code but once it fires the resize of the div, it cannot run the resize map trigger due to it being undefined? here is my .js</p>
  
  <pre><code>// JavaScript Document
  
  // Scripts below in regards to instantiating the google map.
  var map;
  
  function initialize() {
  
  var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
  var mapOptions = {
      zoom: 17,
      center: myLatLng,
      disableDefaultUI: true,
      mapTypeControl: true,
      mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.BOTTOM_LEFT
      }
  
  };
  
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
      position: myLatLng,
      map: map,
      title: '6 Station Street, Douglas Park, 2569' 
  });
  
  var contentString = '&lt;div id="mapContent"&gt;'+'TESTING'+'&lt;/div&gt;';
  
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });
  
  google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
  });
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  $(function() {
  
      $("#expand-map").click(function() {
          $("#map-canvas").animate({"height" : "800px"}, 500);
          google.maps.event.trigger(map, "resize");
      });
  </code></pre>
  
  <p>});</p>