javascript - Google Maps Failing to render -

note: thought better make new question on this.

so asked question why google maps not rendering properly. answer seem straight forward , simple, accept code looks this:

  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); 

the issue map still broken:

this map stored in <div id="map"></div> has height of 350. div holds map part of jquery-ui tabs, has jquery skinning attached may affect things size , on.

with said map should work.

if open console , throw in: google.maps.event.trigger(map, "resize"); maps works expected.

i had google map (v3) embedded within jquery ui tabs, , had work around issue fix:

var initialized = false;  $('.tabs').find('.ui-tabs-nav li').each(function() {     if($(this).find('a').text() === 'location') {         if($(this).hasclass('ui-state-active')) {             initialize();             initialized = true;         } else {             $(this).click(function() {                 if(!initialized) {                     initialize();                     initialized = true;                 }             });         }     } }); 

note initialize() should run starting map code. there lots of ways slice-and-dice initialization, point don't until tab we're looking ("location", in case) active.