javascript - Google Maps not rendering correctly within jquery tabs plugin -

i'm working on updating realtor's website , add google map object page. map shown within tabbed container. tabs i'm using idtabs, small jquery plugin.

the map renders, seems positioning of map off. ui renders full width, map doesnt. upon moving map, doesn't move across width of container. when window resized, reinitializes , map cover full width of maps ui container.

you can check out here: http://symvo.li/harbourtown/rental.php?id=1 (click on map)

the code:

var map; function initialize() {     geocoder = new google.maps.geocoder();                      var mapoptions = {                         zoom: 8,                         maptypeid: google.maps.maptypeid.roadmap                     };                     map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);                      geocoder.geocode( { 'address': 'kaya sa 1, bonaire'}, function(results, status) {                         if(status == google.maps.geocoderstatus.ok) {                             map.setcenter(results[0].geometry.location);                             var marker = new google.maps.marker({                               map: map,                               position: results[0].geometry.location                             });                         }                     });                  }                 google.maps.event.adddomlistener(window, 'load', initialize); 

how can make sure map renders correctly?

i solved problem of post: why doesn't map render in jquery tab?

because map renders in hidden tab, size of map doesn't set correctly. in order fix called resize event on clicking tab.

google.maps.event.trigger(map, 'resize');