title: Google Maps Failing to render
body: <p><strong>Note:</strong> I thought it would be better to make a new question on this.</p>
  
  <p>So I recently asked a question about <a href="https://stackoverflow.com/questions/18601227/google-maps-api-not-working-properly">why Google maps is not rendering properly</a>. Now the answer would seem straight forward and simple, accept my code looks like this:</p>
  
  <pre><code>  var map;
    function initialize() {
      var mapOptions = {
           zoom: 8,
           center: new google.maps.LatLng(-34.397, 150.644),
           mapTypeId: google.maps.MapTypeId.ROADMAP
      };
  
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      google.maps.event.trigger(map, "resize");
    }
  
     google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>
  
  <p>The issue is the map is still broken:</p>
  
  <p><img src="https://i.stack.imgur.com/iarvZ.png" alt="enter image description here"></p>
  
  <p>This map is stored in a <code>&lt;div id="Map"&gt;&lt;/div&gt;</code> which has a height of 350. This Div that holds the map is part of Jquery-UI Tabs, so it also has jquery skinning attached to it which may affect things like size and so on.</p>
  
  <p>With that said the map should just work.</p>
  
  <p>If I open the console and throw in: <code>google.maps.event.trigger(map, "resize");</code> the maps then works as expected.</p>